当基线设置为垂直对齐时，为什么“创建"下降器? [英] Why is the descender “created” when baseline is set to vertical-align?

问题描述

我知道 img 元素默认情况下在其下方有一个下降边缘.

I know that the img element has a descender margin below it by default.

.box {
  border: 1px solid;
}

<div class="box">
  <img src="http://placehold.jp/150x150.png"> xyz
</div>

问题

我认为 vertical-align 属性将元素对齐"到特定位置，因此高度不会改变.但是，使用以下代码，在更改垂直对齐时测量高度时，仅针对 baseline 增大了 height .

I thought that the vertical-align property "aligns" elements at a specific position, so the height doesn't change. However, with the following code, when measuring the height when changing vertical-align, height was increased only forbaseline.

为什么它的行为类似于仅在 baseline 时才制作后代"?不管 vertical-align 属性的值如何，不是总是存在后代吗? vertical-对齐规范.

Why does it behave like "making a descender only when baseline"? Isn't a descender always present regardless of the value of the vertical-align property? There was no mention of this behavior in the vertical-align specification.

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>

推荐答案

我认为vertical-align属性将元素对齐"到特定位置，因此高度不会改变.

I thought that the vertical-align property "aligns" elements at a specific position, so the height doesn't change.

这是不正确的，因为高度是在对齐之后定义的，如果您使用文本而不是图像，则可以清楚地注意到这一点:

This isn't true because the height is defined after the alignment is done and you can clearly notice this if you use text instead of image:

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

来自规范:

这些框可以以不同的方式垂直对齐:它们的底部或顶部可以对齐，或者其中的文本基线可以对齐.包含形成直线的框的矩形区域称为线框.

还有

行框对于它包含的所有框总是足够高.但是，它可能比它包含的最高盒子高(例如，如果盒子对齐，以便基线对齐).当框B的高度小于包含它的线框的高度时，线框内B的垂直对齐方式由'vertical-align'属性决定.

A line box is always tall enough for all of the boxes it contains. However, it may be taller than the tallest box it contains (if, for example, boxes are aligned so that baselines line up). When the height of a box B is less than the height of the line box containing it, the vertical alignment of B within the line box is determined by the 'vertical-align' property.

然后在规范的另一部分

Then in another part of the specification

如有关内联格式上下文的部分所述，用户代理将内联级别的框流到垂直的线框堆栈中.线框的高度确定如下:

As described in the section on inline formatting contexts, user agents flow inline-level boxes into a vertical stack of line boxes. The height of a line box is determined as follows:

1. 计算行框中每个行内框的高度.....

1. The height of each inline-level box in the line box is calculated. ....

内联级别的框根据其"vertical-align"属性垂直对齐.....

The inline-level boxes are aligned vertically according to their 'vertical-align' property. ....

线框高度是最上面的框顶部和最下面的框底部之间的距离.(这包括支杆，如下面行高"中所述.)

The line box height is the distance between the uppermost box top and the lowermost box bottom. (This includes the strut, as explained under 'line-height' below.)

因此，基本上将高度定义为足以对齐后容纳内容的高度，这就是为什么高度可能会有所增加的原因.

So basically the height is defined bigger enough to hold the content after being aligned that's why the height may increase for some alignment.

如果在元素上添加边框，则会注意到最上方的框顶部和最下方的框底部.

If you add border to your elements you will notice the uppermost box top and the lowermost box bottom.

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>

这篇关于当基线设置为垂直对齐时，为什么“创建"下降器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！