Kedudukan garis dasar kotak baris dipengaruhi oleh semua elemen dalam baris.
.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>
Kenapa kotak pertama dan kotak ketiga mempunyai kesan yang sama, tetapi kotak kedua dan kotak keempat mempunyai kesan yang berbeza. Bagaimanakah sifat penjajaran menegak mengubah garis dasar kotak garisan?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ringkasnya, kerana kotak pendek menonjol di atas kotak kandungan induk, tetapi tidak menonjol di bawah kotak kandungan induk.
Berikut ialah imej dengan kotak dan baris yang berkaitan ditambah:
Dalam setiap kes, segi empat tepat hijau menunjukkan tempat kotak garis, segi empat tepat biru menunjukkan tempat kotak kandungan induk dan garis merah menunjukkan tempat garis dasar.
Sekarang kita dapat melihat bahawa dalam kes satu dan tiga, kotak tinggi dijajarkan dengan
text-bottom和bottommasing-masing, dan bahagian bawah kotak kandungan induk dan bahagian bawah kotak baris bertepatan. Oleh itu, penjajaran setiap menyelesaikan kepada susunan yang sama.Dalam kes dua dan empat, kotak tinggi dijajarkan dengan
text-top和topmasing-masing, dan bahagian atas kotak kandungan induk dan bahagian atas kotak baris tidak bertepatan, jadi reka letaknya tidak sama. p>