Warum haben „vertikalalign:textbottom“ und „vertikalalign:bottom“ den gleichen Effekt?
Die Position der Grundlinie des Zeilenfelds wird von allen Elementen in der Zeile beeinflusst.
.short-box {
width: 30px;
height: 30px;
background-color: pink;
display: inline-block;
}
.box {
background-color: bisque;
margin-bottom: 10px;
}
.tall-box {
width: 30px;
height: 100px;
background-color: pink;
display: inline-block;
}
.text-bottom {
vertical-align: text-bottom;
}
.text-top {
vertical-align: text-top;
}
.bottom {
vertical-align: bottom;
}
.top {
vertical-align: top;
}
<body>
<div class="box">
x
<span class="tall-box text-bottom"></span>
<span class="short-box"></span>
</div>
<div class="box">
x
<span class="tall-box text-top"></span>
<span class="short-box"></span>
</div>
<div class="box">
x
<span class="tall-box bottom"></span>
<span class="short-box"></span>
</div>
<div class="box">
x
<span class="tall-box top"></span>
<span class="short-box"></span>
</div>
</body>
</html>
Warum das erste Kästchen und das dritte Kästchen die gleiche Wirkung haben, das zweite Kästchen und das vierte Kästchen jedoch unterschiedliche Wirkungen haben. Wie verändert die vertikale Ausrichtungseigenschaft die Grundlinie eines Linienrahmens?
