Question

I am displaying an “h5” html tag inline along with a “p” html tag inline but I need a padding or margin on the bottom of the paragraph so there is a gap in between the next h5 and p tags. How could I go by doing this?

Currently here is an example of what it looks like

THIS IS THE h5 - this is the paragraph
THIS IS THE h5 - this is the paragraph

And I need it to look like this (without adding a break)

THIS IS THE h5 - this is the paragraph

THIS IS THE h5 - this is the paragraph

Answer 1

Instead of having the h5 and p as inline elements you can simply float them to the left and clear left on the h5.

This way you can easily set a bottom margin on the h5 and p without issue.

Here’s an example on JSFiddle

CSS:

h5,p{float:left;margin-bottom:10px;}

h5{clear:left;margin-right:5px;}

UPDATE

Here’s a second example using Matthew’s idea of using line-height.

http://jsfiddle.net/gv6CC/1/

CSS

h5,p{float:left;line-height:150%;}

h5{clear:left;margin-right:5px;}