css - Twitter Bootstrap：小标签上的边距底部

Question

我有一段文字，位于p-tag 中。在此文本中，有一个图像。对于该图像，我想使用small标签在下面添加一个标题。这是 HTML 代码（我添加了换行符以提高可读性）：

<p>Lorem ipsum dolor sit amet, <img src="img/myimage.png" alt="myimage" /><small>
Hey look, thats my image!</small><br />consetetur sadipscing elitr,
sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>

现在我想small使用这个 CSS 代码为 -tag 添加一个底部边距：

p small {
    margin-bottom: 30px;
}

它不起作用，没有margin-bottom应用。选择器是正确的，因为我可以更改左边距、文本颜色等。

如何在 Twitter Bootstrap 中添加margin-bottomto ？small

Answer 1

p small是一个inline项目，您不能为内联项目添加边距。尝试：

p small {
    margin-bottom: 30px;
    display: inline-block;
}

唯一的缺点inline-block是您可能会遇到跨浏览器兼容性问题。

在您的具体示例中，也许您可​​以将imgand包装small在一个 div 中，然后定义：

p small {
    margin-bottom: 30px;
    display: block;
}