Atribut margin tidak menjejaskan elemen sebaris

Margin mempunyai kesan yang berbeza pada elemen sebaris berbanding elemen peringkat blok. Dalam elemen sebaris, atribut jidar hanya mempengaruhi jidar atas dan bawah menegak, bukan jidar kiri dan kanan mendatar.

Sebagai contoh, terdapat elemen perenggan <p></p> dalam HTML, kita boleh menetapkan beberapa gaya untuknya dan memerhatikan kesan atribut margin padanya.

Kod HTML adalah seperti berikut:

<p class="example">这是一个段落</p>

Kod CSS adalah seperti berikut:

.example {
  margin: 20px;
  background-color: lightblue;
  display: inline;
  padding: 10px;
}

Kod di atas menetapkan elemen perenggan dengan "contoh" kelas dan menetapkan margin 20px untuknya kepada 10px dan tetapkan atribut paparannya kepada elemen sebaris.

Jika anda menjalankan kod di atas dalam penyemak imbas, kami akan mendapati bahawa atribut margin berkesan untuk margin atas dan bawah elemen sebaris, dan elemen perenggan akan mempunyai margin 20px di bahagian atas dan bawah.

Namun, jika kita cuba menetapkan margin kiri dan kanan untuk elemen sebaris, kita akan dapati nilai margin yang ditetapkan tidak akan mempunyai sebarang kesan ke atas elemen sebaris. Contohnya, cuba kod berikut:

.example {
  margin: 20px 50px; /* 不会对行内元素产生效果 */
}

Dalam kod contoh, kami cuba menetapkan jidar atas/bawah 20px dan jidar kiri/kanan 50px untuk elemen sebaris, tetapi penyemak imbas tidak memaparkan jidar ini.

Perlu diambil perhatian bahawa fenomena ini tidak bermakna atribut margin tidak sah sepenuhnya untuk elemen sebaris. Kami masih boleh mencapai kesan yang sama dengan bantuan sifat dan teknik CSS yang lain, seperti sifat padding, sifat paparan dan elemen pseudo.

Atas ialah kandungan terperinci Atribut margin tidak menjejaskan elemen sebaris. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!