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

Question

我相信理论上垂直边距不应该应用于内联元素。但是，在下面的示例中，Firefox 将margin-top 应用于<b> 元素（并且<a> 元素也有一些垂直顶部间距，尽管我不确定它来自哪里）。我尝试过的所有其他浏览器都不会这样做，即<b> 元素跟在<a> 元素下面一行，它们之间没有额外的边距。我使用的是 Firefox 39.0。

这是 Firefox 中的错误，还是 Firefox 做对了？有谁知道一个简单的解决方法？

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

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

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>