Question

我认为理论上垂直边距不应该应用于内联元素。但是，在以下示例中，Firefox将margin-top应用于<b>元素（并且<a>元素也有一些垂直顶部间距，但我不确定它到底在哪里从）。我尝试过的每一个其他浏览器都没有这样做，即<b>元素跟在<a>元素下面一行之后，它们之间没有额外的余量。我使用的是Firefox 39.0。

这是Firefox中的错误，还是Firefox能够正确使用它？有人知道一个简单的解决方法吗？

＆＃13;

* + * {
    margin-top: 1.5em;
}

＆＃13;

<p>
    <a href="#" class="internal-link">The Link</a>
    <br>
    <b>September 23, 6:30-8:30 pm</b>
    <br>
    Eros odio legentis gothica videntur liber. Euismod lectores imperdiet augue putamus insitam. Typi vulputate parum praesent mirum hendrerit. 
</p>
<p>
    <a href="#" class="internal-link">The Link</a>
    <br>
    <b>September 23, 6:30-8:30 pm</b>
    <br>
    Eros odio legentis gothica videntur liber. Euismod lectores imperdiet augue putamus insitam. Typi vulputate parum praesent mirum hendrerit. 
</p>

＆＃13;

Answer 1

在Firefox中，br元素可以采用上/下边距值。

如果将其归零，则会得到预期的行为。

注意： CSS规范中似乎存在一些关于如何处理空行框（没有内容的行）的歧义。例如，如果您阅读：

http://www.w3.org/TR/CSS21/visudet.html#line-height

“空内联元素生成空的内联框，但这些框仍然有边距，填充，边框和行高......”这可以解释为<br>元素可以分配为顶部/底部保证金。这似乎是Firefox解释规范的方式，但Chrome采用了另一种方法。

另见以下存档讨论：

http://lists.w3.org/Archives/Public/www-style/2008Jun/0232.html

http://community.sitepoint.com/t/br-spacing-line-height/4854

我喜欢br元素不适合设置样式的视图，因此某些浏览器会忽略任何指定的行高或边距值。您恰好选择了一个适用于br元素的选择器。

* + * {
    margin-top: 1.5em;
}
br {
   margin-top: 0;
}

<p>
    <a href="#" class="internal-link">The Link</a>
    <br>
    <b>September 23, 6:30-8:30 pm</b>
    <br>
    Eros odio legentis gothica videntur liber. Euismod lectores imperdiet augue putamus insitam. Typi vulputate parum praesent mirum hendrerit. 
</p>
<p>
    <a href="#" class="internal-link">The Link</a>
    <br>
    <b>September 23, 6:30-8:30 pm</b>
    <br>
    Eros odio legentis gothica videntur liber. Euismod lectores imperdiet augue putamus insitam. Typi vulputate parum praesent mirum hendrerit. 
</p>

Firefox错误地将垂直边距应用于内联元素

1 个答案: