我知道img默认情况下，元素下方有一个下边距。
.box {
border: 1px solid;
}
<div class="box">
<img src="http://placehold.jp/150x150.png"> xyz
</div>
Question
我以为vertical-align属性将元素“对齐”在特定位置，因此高度不会改变。然而，使用下面的代码，当改变vertical-align时测量高度时，height仅增加了baseline.
为什么它的行为就像“仅当baseline“？无论值的值如何，下降部分不是总是存在吗？vertical-align财产？文中并未提及该行为vertical-align规格 https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align.
var align = ["top", "bottom", "baseline"];
var idx = 0;
function changeVerticalAlign() {
document.querySelector(".box>img").style.verticalAlign = align[idx];
document.querySelector("p").innerText = "height=" + getComputedStyle(document.querySelector(".box")).getPropertyValue("height") + ", vertical-align=" + getComputedStyle(document.querySelector(".box>img")).getPropertyValue("vertical-align");
idx < 2 ? ++idx : idx = 0;
}
document.querySelector("button").addEventListener("DOMContentLoaded", changeVerticalAlign);
document.querySelector("button").addEventListener("click", changeVerticalAlign);
.box {
border: 1px solid;
}
<div class="box">
<img src="http://placehold.jp/150x150.png"> xyz
</div>
<p></p>
<button>change vertical-align to "bottom"</button>
我认为垂直对齐属性将元素“对齐”在特定位置，因此高度不会改变。
这是不正确的，因为高度是在对齐完成后定义的，如果您使用文本而不是图像，您可以清楚地注意到这一点：
.box{
border:1px solid;
margin:5px;
}
<div class="box">
<span>some text</span>
<span>some text</span>
<span>some text</span>
</div>
<div class="box">
<span style="vertical-align:super">some text</span>
<span>some text</span>
<span>some text</span>
</div>
<div class="box">
<span style="vertical-align:super">some text</span>
<span>some text</span>
<span style="vertical-align:sub">some text</span>
</div>
From 规格 https://www.w3.org/TR/CSS21/visuren.html#normal-flow:
这些框可以以不同的方式垂直对齐：它们的底部或顶部可以对齐，或者它们内的文本的基线可以对齐。包含形成线的框的矩形区域称为线框。
and also
一个线盒总是足够高，可以容纳它包含的所有盒子。但是，它可能比它包含的最高框高（例如，如果框对齐以使基线对齐）。当框 B 的高度小于包含它的行框的高度时，行框内 B 的垂直对齐方式由 'vertical-align' 属性确定。
Then 在规范的另一部分 https://www.w3.org/TR/CSS2/visudet.html#line-height
正如有关内联格式化上下文的部分中所述，用户代理将内联级框流入垂直的行框堆栈中。线盒的高度确定如下：
计算line box中每个inline-level box的高度。 ....
内联水平框根据其“vertical-align”属性垂直对齐。 ....
线框高度是最上面的框顶部和最下面的框底部之间的距离。 （这包括支柱，如下面的“行高”所述。）
因此，基本上，高度被定义得足够大，可以在对齐后容纳内容，这就是为什么高度可能会因某些对齐而增加。
如果您为元素添加边框，您会注意到最上面的盒子顶部和最下面的盒子底部。
var align = ["top", "bottom", "baseline","super","sub","text-bottom","text-top"];
var idx = 0;
function changeVerticalAlign() {
document.querySelector(".box>img").style.verticalAlign = align[idx];
document.querySelector("p").innerText = "height=" + getComputedStyle(document.querySelector(".box")).getPropertyValue("height") + ", vertical-align=" + getComputedStyle(document.querySelector(".box>img")).getPropertyValue("vertical-align");
idx < 6 ? ++idx : idx = 0;
}
document.querySelector("button").addEventListener("DOMContentLoaded", changeVerticalAlign);
document.querySelector("button").addEventListener("click", changeVerticalAlign);
.box {
border: 1px solid;
}
.box> * {
border:1px solid red;
}
p {
margin:0;
}
<div class="box">
<img src="http://placehold.jp/150x130.png"> <span>xyz</span>
</div>
<p></p>
<button>change vertical-align</button>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
