如何在显示中添加填充底部：内联元素？

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

<强>更新

以下是使用Matthew使用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＆lt; 7将无法理解inline-block自然非内联元素。

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

• 解决这个问题：Cross Browser Support for inline-block Styling
• 在div和h5周围添加p并在其上添加填充。

更新： jsFiddle Demo

Answer 3

如果您想保留display: inline;，可以使用line-height: 20px;

示例：

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

但是如果您不对文档中的所有h5和p标记使用，则应该为h5和p提供ID或类。< / p>

Answer 4

在不更改任何CSS的情况下，您还可以在每个标记对之间添加<br />：

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

我知道它可能不是最纯粹的解决方案，但它可能是最简单的＆amp;大多数跨浏览器友好。另外，<br />分隔inline元素是完全可以接受的。 ;-)