Html 当块级元素中没有内容时的基线移动

我正在处理一个CSS问题（实际上，只是帮助一个朋友学习HTML/CSS），遇到了一个奇怪的问题。如果删除

中任何

标记中的内容，div将向上移动。例如，删除单词“Mom”而不删除

。据我所知，这是因为元素被设置为

vertical align:baseline

，并且由于某种原因基线正在更改。我就是搞不清楚为什么会改变，或者是什么导致了它的改变

明确地说，我并不是在寻求帮助以使部门协调一致。这只是将其垂直对齐设置为“顶部”的问题。我只是想了解文档流是如何计算的。具体的问题是：为什么空div向上移动

演示：

更新：这里是一个新的JSFIDLE-它删除了许多规则，将问题归结为一个简化的用例。由此，我们可以看到，当

标记中包含文本时，父

的基线设置为文本的基线。删除文本时，父级

的基线设置在

的底部。为什么呢

HTML:

---

我想在翻阅了W3C规范之后，我基本上已经找到了原因。以下是规范中的三个关键项目，可以解释这种行为：

“不包含文本的行框，不包含保留的空白，不包含具有非零边距、填充或边框的内联元素，也不包含其他流内内容（如图像、内联块或内联表），且不得以保留的换行符结尾。为确定其中任何元素的位置，必须将其视为零高度线框，并且为任何其他目的，必须视为不存在

• 删除文本时，
  元素不再处于流中

“内联块”的基线是其在正常流中最后一个行框的基线，除非它没有内联行框，或者如果其“溢出”属性具有“可见”以外的计算值，在这种情况下，基线是底边距边缘。”

• 因为父div中没有流入元素，所以基线将成为底部边距

由于div设置为

display:inline block

，因此其默认垂直对齐为“基线”

因为其他div有in-flow元素（

标记），所以它们的基线设置为文本基线

---

这就是为什么空框的底部边距与另一个div中的

标记的基线对齐。元素的基线正在移动，因为
中的文本决定基线高度：

在内联格式上下文中，框是水平排列的，一个
在另一个之后，从包含块的顶部开始。
水平边距、边框和填充在这三者之间
盒。这些框可以用不同的方式垂直对齐：它们的
底部或顶部可以对齐，或其中文本的基线
可以对齐

资料来源：

将计算线框中每个内联标高框的高度。对于
替换的元素、内联块元素和内联表元素，
这是他们的边距框的高度；对于内联框，这是
他们的“线高”

资料来源：

CSS假设每个字体都有指定字体的字体度量
基线上方的特征高度及其下方的深度。在这个
我们使用A来表示高度（对于给定字体，在给定位置）
尺寸）和深度。我们还定义了AD=A+D，距离
从上到下

资料来源：

因此，此块是一个
内联块
，基线是根据不同字体类型计算的
行高来计算的。由于此
没有字体/文本，因此将不会定位基线

放置所有
行高：0
您将看到，没有文本/字体的一个不会像另一个那样做出反应：


那么，为什么其他两个元素中有文本在移动呢？


这是因为文本是由两行文本组成的。文本的边距更大，占用更多空间，因此基线会进一步推进，具体取决于所应用的CSS。请在你的问题中发布HTML和CSS。请在你的问题中发布HTML和CSS。你知道有一种东西叫做复制和粘贴吗？这是你的JSFIDLE，只花了1分钟。确切的HTML和CSS目前是可用的，但是如果外部站点发生变化，它将不再可用，并且没有其他人可以从你的问题中受益。感谢你花时间回答，但这几乎是我已经回答过的。由于
没有文本，因此其基线未定位。已响应。我不确定你是否100%肯定你的答案，所以如果你是我的错。不，你有一些有用的信息。我想说的是，我们基本上说了同样的话。重要的一点是，当p中没有文本时，它会导致正方形的基线移动到底部边距。谢谢。没错：）好有趣的问题！很高兴我能“帮忙”。我认为第一点是无效的。正如
一样，包含构成线条的方框的矩形区域称为线条方框。
，您的
实际上包含高度和边距。您可以在inspector模式中看到的
仍在运行中。除此之外：
如果元素是浮动的、绝对定位的或是根元素，则该元素被称为流外元素。
还有第4点，您可以
<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>

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