Mengapa Elemen Blok Sebaris Saya Tidak Sejajar Secara Menegak?

Menyingkap Misteri Penyelewengan Menegak dalam Elemen Blok Sebaris

Menghadapi isu CSS yang membingungkan di mana kandungan elemen blok sebaris kelihatan tidak sejajar secara menegak ? Penyebabnya mungkin nilai penjajaran menegak lalai.

Elemen blok sebaris mempunyai penjajaran menegak lalai garis dasar, yang menjajarkan garis dasar kotak dengan elemen induknya. Ini boleh membawa kepada penjajaran yang tidak dijangka apabila elemen tidak mengandungi kotak baris dalam aliran atau mempunyai nilai limpahan selain daripada yang boleh dilihat.

Pertimbangkan HTML dan CSS berikut:

<div>
<pre class="brush:php;toolbar:false">#divBottomHeader {
  height: 43px;
}
.divAccountPicker {
  width: 200px;
  height: 40px;
}
.divAccountData {
  width: 400px;
  height: 40px;
}

Dalam contoh ini, elemen ".divAccountData" kelihatan dianjak ke bawah berbanding dengan ".divAccountPicker." Menambah teks pada ".divPutTextToFixIssue" secara ajaib menjajarkan elemen secara menegak.

Tingkah laku ini timbul daripada fakta bahawa garis dasar elemen blok sebaris ditentukan oleh garis dasar kotak baris terakhirnya. Dengan menambahkan teks pada ".divPutTextToFixIssue," kami telah menukar garis dasar dengan berkesan dan memaksa penjajaran menjadi atas.

Walau bagaimanapun, jika kedua-dua blok mengandungi bilangan baris yang berbeza, penjajaran akan pecah semula. Untuk memastikan penjajaran menegak yang konsisten, paksa penjajaran menggunakan sifat penjajaran menegak:

.divAccountData {
  vertical-align: top;
}

Ini akan menjajarkan garis dasar ".divAccountData" dengan bahagian atas ".divAccountPicker," tanpa mengira kiraan barisnya.