Mengapa Elemen Sebaris dan Sebaris-Blok Mempunyai Gelagat Margin Berbeza?

Percanggahan margin antara nilai paparan "sebaris" dan "blok sebaris"

Dalam CSS, elemen sebaris seperti tajuk, rentang dan teks , jangan paparkan margin atas atau bawah secara lalai. Walau bagaimanapun, menetapkan sifat paparan kepada "sekatan sebaris" mengubah tingkah laku ini. Memahami perbezaan ini memerlukan penerokaan sifat paparan CSS.

Inline-block vs Inline

Sifat paparan CSS menentukan cara elemen HTML dipaparkan. Unsur sebaris diformatkan sebagai satu blok pada baris yang sama dengan unsur jiran, seperti aksara teks. Mereka tidak menghormati jidar menegak dan tidak boleh mempunyai ketinggian atau lebar.

Elemen blok sebaris, sebaliknya, menggabungkan sifat unsur sebaris dan blok. Ia diformatkan sebagai elemen sebaris, tetapi ia dianggap sebagai kotak peringkat blok untuk tujuan susun atur. Ini bermakna ia boleh mempunyai jidar menegak seperti elemen blok dan boleh ditetapkan kepada ketinggian dan lebar tertentu.

Gelagat Margin

Seperti yang dinyatakan sebelum ini, elemen sebaris hanya menghormati jidar mendatar . Ini kerana ia tidak dianggap sebagai elemen peringkat blok. Elemen blok sebaris, bagaimanapun, diformatkan sebagai kotak peringkat blok dan oleh itu menghormati kedua-dua jidar mendatar dan menegak.

Dalam contoh yang disediakan,

h1 {
    display: inline;
    margin-top: 25px;
}

jidar atas tidak digunakan kerana tajuk diberikan sebagai elemen sebaris. Walau bagaimanapun, apabila sifat paparan ditukar kepada "blok sebaris", jidar atas menjadi kelihatan kerana tajuk itu kini dianggap sebagai elemen peringkat blok.

h1 {
    display: inline-block;
    margin-top: 25px;
}

Perbezaan ini penting untuk membuat reka letak tapak web yang responsif dan menyenangkan dari segi estetika. Dengan memahami perbezaan antara nilai paparan sebaris dan blok sebaris, pembangun web boleh mengawal jarak dan peletakan elemen dengan berkesan.

Atas ialah kandungan terperinci Mengapa Elemen Sebaris dan Sebaris-Blok Mempunyai Gelagat Margin Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!