Mengapa Elemen Sekat Sebaris dengan Kandungan Tidak Jajar Secara Menegak?

Penjajaran Menegak Elemen Blok Sebaris dengan Kandungan

Soalan:

Mengapa elemen blok sebaris mengandungi kandungan kelihatan tidak sejajar menegak?

Penjelasan:

Secara lalai, elemen blok sebaris dijajarkan secara menegak menggunakan peraturan garis dasar. Ini bermakna garis dasar elemen (baris di mana kebanyakan huruf terletak) sejajar dengan garis dasar bekas induknya.

Walau bagaimanapun, apabila salah satu elemen ini tidak mengandungi kandungan, seperti dalam CSS yang disediakan, penyemak imbas lalai untuk menjajarkan elemen di tepi jidar bawah. Percanggahan ini boleh membawa kepada persepsi salah jajaran menegak.

Penyelesaian:

Untuk memastikan penjajaran menegak yang betul, tetapkan sifat penjajaran menegak ke atas. Ini akan menjajarkan elemen di bahagian atas induknya dan bukannya menggunakan peraturan garis dasar lalai.

.divAccountData {
    display: inline-block;
    background: red;
    width: 400px;
    height: 40px;
    vertical-align: top;
}

Nota:

Jika kedua-dua elemen blok sebaris mengandungi bilangan baris teks yang sama, menambah teks pada elemen kedua mungkin kelihatan untuk membetulkan isu penjajaran. Walau bagaimanapun, ini hanya kerana ia memaksa elemen kedua untuk mewujudkan garis dasar. Jika bilangan baris berubah, penjajaran akan menjadi tidak konsisten lagi tanpa menggunakan sifat jajar menegak.

Atas ialah kandungan terperinci Mengapa Elemen Sekat Sebaris dengan Kandungan Tidak Jajar Secara Menegak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!