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>

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

p small {
    margin-bottom: 30px;
}

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

如何在 Twitter Bootstrap 中将 margin-bottom 添加到 small？

Answer 1

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

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

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

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

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