How can I add a padding-bottom to a display: inline element?

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

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;}

If you want to keep the display: inline; you could use line-height: 20px;

Example:

h5, p {
 display: inline;
 line-height: 20px;
}

but you should give the h5 and p an ID or class if you won't this would aplly to all h5 and p tags in your Document.

You could try setting display: inline-block; on them, that will allow setting margin/padding. The problem with this is Internet Explorer < 7 will not understand inline-block on naturally non-inline elements.

You could (if you need old IE support):

• hack around this: Cross Browser Support for inline-block Styling
• put a div around the h5 and p and put the padding on that.

UPDATE: jsFiddle Demo

Without changing any CSS, you could also add a <br /> in between each tag pair:

<h5>title</h5><p>this is the paragraph</p>
<br />
<h5>title</h5><p>this is the paragraph</p> 

I know it might not be the purest solution, but it might be the easiest & most cross browser-friendly. Plus, a <br /> separating inline elements is perfectly acceptable. ;-)