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
divaround theh5andpand 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. ;-)
加载中,请稍侯......
精彩评论