La position de la ligne de base de la boîte de ligne est affectée par tous les éléments de la ligne.
.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>
Pourquoi la première case et la troisième case ont le même effet, mais la deuxième case et la quatrième case ont des effets différents. Comment la propriété d’alignement vertical modifie-t-elle la ligne de base d’une zone de ligne ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
En bref, parce que la zone courte dépasse au-dessus de la zone de contenu parent, mais ne dépasse pas en dessous de la zone de contenu parent.
Voici l'image avec les cases et lignes pertinentes ajoutées :
Dans chaque cas, le rectangle vert indique l'emplacement de la zone de ligne, le rectangle bleu indique l'emplacement de la zone de contenu parent et la ligne rouge indique l'emplacement de la ligne de base.
Maintenant, nous pouvons voir que dans les cas un et trois, la zone haute est alignée avec
text-bottom和bottomrespectivement, et le bas de la zone de contenu parent et le bas de la zone de ligne coïncident. Par conséquent, l’alignement de chacun aboutit au même arrangement.Dans les cas deux et quatre, la zone haute est alignée avec
text-top和toprespectivement, et le haut de la zone de contenu parent et le haut de la zone de ligne ne coïncident pas, donc leurs dispositions ne sont pas les mêmes. p>