html - 当内部没有内容时， block 级元素的基线偏移

Question

我正在 http://www.codecademy.com/courses/web-beginner-en-jNuXw/0/1?curriculum_id=50579fb998b470000202dc8b 解决一个 CSS 问题(实际上，只是帮助 friend 学习 HTML/CSS)并遇到了一个奇怪的问题。如果您删除任何 <p> 中的内容<div> 中的标签, div 向上移动。例如，删除单词“妈妈”而不删除 <p> .据我所知，这是因为该元素设置为 vertical-align: baseline由于某种原因，基线正在发生变化。我只是无法弄清楚它为什么会发生变化或导致它发生变化的原因。

需要说明的是，我并不是在寻求帮助来对齐 div。这只是将它们的垂直对齐设置为“顶部”的问题。我只是想了解文档流是如何计算的。具体问题是:为什么空的div会向上移动？

演示:jsFiddle

更新:这是一个新的 jsFiddle - http://jsfiddle.net/tonicboy/2DtTw/3/它删除了很多规则，将问题归结为一个简化的用例。由此可见，当一个<p>标签中有文本，父级的基线 <div>设置在文本的基线处。当您删除文本时，父级的基线 <div>设置为 <div> 的底部.这是为什么？

HTML:

<div class="friend" id="best_friend"><p>Arthur</p></div>
<div class="friend"><p>Batmanuel</p></div>
<div class="friend"><p>Captain Liberty</p></div>
<div class="friend"><p>The City</p></div>
<div class="friend"><p>Justice</p></div>
<div class="family"><p></p></div>
<div class="family"><p>Dad</p></div>
<div class="family"><p>Bro</p></div>
<div class="family"><p>Sis</p></div>
<div class="family"><p>Rex</p></div>
<div class="enemy"><p>Baron Violent</p></div>
<div class="enemy"><p>The Breadmaster</p></div>
<div class="enemy"><p>The Deadly Nose</p></div>
<div class="enemy"><p>Dinosaur Neil</p></div>
<div class="enemy" id="archnemesis"><p>Chairface</p></div>

CSS:

div {
    position: relative;
    display: inline-block;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    border: 2px solid black;
    margin-left: 5px;
    margin-top: 5px;
    text-align: center;
}

div p {
    position: relative;
    margin-top: 40px;
    font-size: 12px;
}

.friend {
    border: 2px dashed green;
}

.family {
    border: 2px dashed blue;
}

.enemy {
    border: 2px dashed red;
}

#best_friend {
    border: 4px solid #00C957;
}

#archnemesis {
    border: 4px solid #cc0000;
}

Answer 1

在深入了解 W3C 规范后，我想我已经基本找到了原因。以下是规范中可以解释此行为的三个关键元素:

1. "不包含文本、不保留空白、不具有非零边距、填充或边框的内联元素以及不包含其他流入内容(例如图像、内联 block 或内联表)，并且不以保留的换行符结尾必须被视为零高度行框，以便确定其中任何元素的位置，并且必须被视为不存在 用于任何其他目的。”
   • 删除文本时，<p>元素不再流入。
2. “'inline-block' 的基线是它在正常流中的最后一个行框的基线，除非它没有流入行框或者它的'溢出'属性具有“可见”以外的计算值，在这种情况下，基线是底部边距边缘。”
   • 因为父 div 中没有流入元素，所以基线成为底部边距。
3. 因为 div 设置为 display: inline-block ，它们的默认垂直对齐方式是“基线”
4. 因为其他 div 有流入元素(<p> 标签)，它们的基线设置为文本基线。

这就是为什么空框的底部边距与 <p> 的基线对齐的原因其他 div 中的标签。