如何添加一個填充底部到顯示器：內聯元素？

Question

我在行內顯示一個「h5」html標籤，內嵌一個「p」html標籤，但我需要在該段落底部有一個填充或邊距，以便在下一個h5和p標籤之間有間隔。我怎麼能這樣做呢？

目前這裏是什麼樣子

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

一個例子，我需要它看起來像這樣（沒有增加休息）

THIS IS THE h5 - this is the paragraph 

THIS IS THE h5 - this is the paragraph 

Answer 1

而是具有h5和p，你可以簡單地將漂浮到左邊並清除留在h5內聯元素。

通過這種方式，您可以輕鬆地在h5和p上設置底部邊距，而不會出現問題。

Here's an example on JSFiddle

CSS：

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

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

UPDATE

下面是使用使用line-height的馬修的主意第二個例子。

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

CSS

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

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

Answer 2

你可以嘗試設置他們display: inline-block;，這將允許設置邊距/填充。與此問題是Internet Explorer < 7將不會理解inline-block自然非內聯元素。

你可以（如果需要舊IE支持）：

• 黑客攻擊解決此：Cross Browser Support for inline-block Styling
• 把div的h5和p過來，把填充上。

UPDATE：jsFiddle Demo

Answer 3

如果你想保持display: inline;你可以使用line-height: 20px;

例子：

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

，但你應該給h5和p一個ID或類，如果你不會這將適用於您的文檔中的所有h5和p標籤。

Answer 4

不改變任何CSS，你也可以在每個標籤對之間添加一個<br />：

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

我知道它可能不是最純粹的解決方案，但它可能是最簡單的&大多數跨瀏覽器-友善。另外，一個<br />分隔inline元素是完全可以接受的。 ;-)