为什么vertical-align:text-top使元素下降? [英] Why does vertical-align: text-top make element go down?
问题描述
我对工作纵向对齐属性感到困惑.它是如何工作的?如果您向我解释了它是如何工作的，我将很感激:)为什么该物业的工作方式有所不同?在第一种情况下，我尝试通过vertical-align对齐文本:text-top，但是...我的文本掉了.为什么?在第二种情况下，我通过vertical-align:text-top对齐正方形，并且此属性正常工作.有什么不同?为什么我的文字下降而不是上升?
I'm puzzled about working vertical-align property. How does it work? If you explain me how it works I'll be thankful:) Why does that property work differently? In the first case I try to align my text by vertical-align: text-top, but... my text goes down. Why? In the second case I align my square by vertical-align: text-top and this property works properly. What's the difference? Why my text goes down instead of rising?
body {
font-family: sans-serif;
font-size: 30px;
}
p {
display: table-cell;
background: yellow;
width: 700px;
height: 500px;
vertical-align: baseline;
line-height: 50px;
}
.three {
vertical-align: text-top;
}
.block {
display: inline-block;
width: 20px;
height: 20px;
background: pink;
border: 2px solid black;
vertical-align: text-top;
}<div>
<p><span class="one">I'm</span> <span class="two">on the</span> <span class="three">yellow</span> background <span class="block"></span></p>
</div>推荐答案
参考: https://www.w3.org/TR/CSS2/visudet.html#line-height
要了解这一点，您首先需要考虑 text-top 的定义:
To understand this you need to first consider the definition of text-top:
以下值仅对父级内联元素或父级块容器元素的支撑有意义.
The following values only have meaning with respect to a parent inline element, or to the strut of a parent block container element.
在以下定义中，对于内联非替换元素，用于对齐的框是框，其高度是'line-height'(包含框的字形和半角每一面，请参见上方).
In the following definitions, for inline non-replaced elements, the box used for alignment is the box whose height is the 'line-height' (containing the box's glyphs and the half-leading on each side, see above).
然后
文本顶部
将框的顶部与父母的内容区域的顶部对齐
Align the top of the box with the top of the parent's content area
因此，我们需要确定框的顶部和家长内容区域的顶部
So we need to identify the top of the box and the top of the parent's content area
如果添加一些装饰，就可以轻松识别它们
If we add some decorations, we can easily identify them
body {
font-family: sans-serif;
font-size: 30px;
}
p {
background: yellow;
line-height: 50px;
background:
linear-gradient(blue,blue) 0 7px/100% 2px no-repeat
yellow;
}
p span {
background:green;
}
.three {
vertical-align: text-top;
background:red;
}
.block {
display: inline-block;
width: 20px;
height: 20px;
background: pink;
border: 2px solid black;
vertical-align: text-top;
}<div>
<p><span class="one">I'm</span> <span class="two">on the</span> <span class="three">yellow</span> <span>background</span> <span class="block"></span></p>
</div>绿色定义了内容区域，我们可以清楚地看到正方形与该顶部对齐.到现在为止，这都是微不足道的.
The green coloration define the content area and we can clearly see that the square is aligned with that top. Until now it's trivial.
最棘手的情况是文本，因为我们看到红色与绿色不对齐.这是由于 line-height .在上面，我们考虑了高度为 line-height 的盒子，并且知道 line-height 是继承的，因此我们的跨度(红色的)将继承50px的行高，这是我们进行对齐的参考.
The tricky case is the text because we see that the red doesn't align with the green. This is due to the line-height. In the above it's said that we consider the box whose height is the line-height and we know that line-height is inherited so our span (the red one) will inherit the 50px line-height and this is our reference for the alignment.
更棘手的是，即使我们更改行高，内容区域也不会改变(红色始终保持不变)
Which is more tricky is that even if we change the line-height, the content area doesn't change (the red coloration will always stay the same)
"height"属性不适用.内容区域的高度应基于字体
和
内联不可替换框的垂直填充，边框和边距从内容区域的顶部和底部开始，与行高"无关.但是在计算线框的高度时仅使用'line-height'.
为简单起见，想象一个不可见的框内文本的高度等于 50px ，并且该框在父内容区域的顶部对齐，然后在该框内输入文字并背景色将仅覆盖内容区域的行高.
To make it easy, imagine the text inside an invisible box with a height equal to 50px and this box is aligned at the top of the parent content area then inside that box you have your text and the background coloration will only cover the content area whataver the line-height.
如果您使用的 line-height 等于内容区域，则将具有 perfect 对齐方式:
If you use a line-height equal to the content area you will have a perfect alignment:
body {
font-family: sans-serif;
font-size: 30px;
}
p {
background: yellow;
line-height: 50px;
background:
linear-gradient(blue,blue) 0 7px/100% 2px no-repeat
yellow;
}
p span {
background:green;
}
.three {
vertical-align: text-top;
background:red;
line-height:33px;
}
.block {
display: inline-block;
width: 20px;
height: 20px;
background: pink;
border: 2px solid black;
vertical-align: text-top;
}<div>
<p><span class="one">I'm</span> <span class="two">on the</span> <span class="three">yellow</span> <span>background</span> <span class="block"></span></p>
</div>增加 line-height ，您将有一个更大的 invisible 框，并且文本将向下移动更多的位置:
Increase the line-height and you will have a bigger invisible box and the text will move more down:
body {
font-family: sans-serif;
font-size: 30px;
}
p {
background: yellow;
line-height: 50px;
background:
linear-gradient(blue,blue) 0 7px/100% 2px no-repeat
yellow;
}
p span {
background:green;
}
.three {
vertical-align: text-top;
background:red;
line-height:100px;
}
.block {
display: inline-block;
width: 20px;
height: 20px;
background: pink;
border: 2px solid black;
vertical-align: text-top;
}<div>
<p><span class="one">I'm</span> <span class="two">on the</span> <span class="three">yellow</span> <span>background</span> <span class="block"></span></p>
</div>从逻辑上讲，它的行高很小，它将上升:
And logically with a small line-height, it will go up:
body {
font-family: sans-serif;
font-size: 30px;
}
p {
background: yellow;
line-height: 50px;
background:
linear-gradient(blue,blue) 0 7px/100% 2px no-repeat
yellow;
}
p span {
background:green;
}
.three {
vertical-align: text-top;
background:red;
line-height:1px;
}
.block {
display: inline-block;
width: 20px;
height: 20px;
background: pink;
border: 2px solid black;
vertical-align: text-top;
}<div>
<p><span class="one">I'm</span> <span class="two">on the</span> <span class="three">yellow</span> <span>background</span> <span class="block"></span></p>
</div>如果将显示更改为 inline-block ，您会更好地看到此问题，因为着色将覆盖 line-height
If you change the display to inline-block you will better see the issue because the coloration will cover the whole area defined by line-height
body {
font-family: sans-serif;
font-size: 30px;
}
p {
background: yellow;
line-height: 50px;
background:
linear-gradient(blue,blue) 0 7px/100% 2px no-repeat
yellow;
}
p span {
background:green;
}
.three {
vertical-align: text-top;
background:red;
display:inline-block;
}
.block {
display: inline-block;
width: 20px;
height: 20px;
background: pink;
border: 2px solid black;
vertical-align: text-top;
}<div>
<p><span class="one">I'm</span> <span class="two">on the</span> <span class="three">yellow</span> <span>background</span> <span class="block"></span></p>
</div>加上更多元素，我们可以更好地说明我们的隐形框:
And with more element we can better illustrate our invisible box:
body {
font-family: sans-serif;
font-size: 30px;
}
p {
background: yellow;
line-height: 50px;
background:
linear-gradient(blue,blue) 0 7px/100% 2px no-repeat
yellow;
}
p span {
background:green;
}
.three {
vertical-align: text-top;
outline:1px solid blue;
background:transparent;
display:inline-block;
}
.three > span {
background:red;
}
.block {
display: inline-block;
width: 20px;
height: 20px;
background: pink;
border: 2px solid black;
vertical-align: text-top;
}<div>
<p><span class="one">I'm</span> <span class="two">on the</span> <span class="three"><span>yellow</span></span> <span>background</span> <span class="block"></span></p>
</div>
<div>
<p><span class="one">I'm</span> <span class="two">on the</span> <span class="three" style="line-height:100px"><span>yellow</span></span> <span>background</span> <span class="block"></span></p>
</div>
<div>
<p><span class="one">I'm</span> <span class="two">on the</span> <span class="three" style="line-height:1px"><span>yellow</span></span> <span>background</span> <span class="block"></span></p>
</div>这篇关于为什么vertical-align:text-top使元素下降?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
