Panduan untuk sifat jidar CSS: margin-atas, margin-kanan, margin-bawah dan margin-kiri

Panduan sifat jidar CSS: jidar atas, jidar kanan, jidar bawah dan jidar kiri, contoh kod khusus diperlukan

Pengenalan :
Dalam CSS, margin ialah jarak antara elemen yang diposisikan dan elemen di sekelilingnya. Ia boleh digunakan untuk mengawal jarak antara elemen dan elemen lain, memberikan lebih fleksibiliti dan keindahan kepada reka bentuk web.

Artikel ini akan memperkenalkan secara terperinci empat sifat jidar CSS: margin-atas, margin-kanan, margin-bawah dan margin-kiri. Pada masa yang sama, untuk memahami dan mempelajari dengan lebih baik, contoh kod khusus akan disediakan untuk membantu pembaca menerapkannya dengan lebih baik pada pembangunan sebenar.

1. Atribut margin-top
Atribut margin-top digunakan untuk menetapkan margin atas elemen. Ia menerima nilai dalam unit mutlak atau relatif, seperti piksel (px), peratusan (%), em, dsb.

Kod sampel:

div {
  margin-top: 20px; /* 顶部外边距设置为 20px */
}

2. atribut margin-right
atribut margin-right digunakan untuk menetapkan jidar kanan elemen. Seperti harta margin atas, ia juga menerima nilai dalam unit mutlak atau relatif.

Kod contoh:

div {
  margin-right: 10%; /* 右侧外边距设置为父元素宽度的 10% */
}

3. atribut margin-bawah
atribut margin-bawah digunakan untuk menetapkan jidar bawah elemen. Begitu juga, ia boleh menerima nilai dalam unit mutlak atau relatif.

Kod sampel:

div {
  margin-bottom: 2rem; /* 底部外边距设置为 2 个根元素字体大小 */
}

4. atribut margin-left
atribut margin-left digunakan untuk menetapkan margin kiri elemen. Begitu juga, ia boleh menerima nilai dalam pelbagai unit.

Kod contoh:

div {
  margin-left: -30px; /* 左侧外边距设置为 -30px */
}

5 Kaedah singkatan
Selain menetapkan atribut margin dalam setiap arah secara individu, anda juga boleh menggunakan kaedah singkatan untuk menetapkan empat. arah sekaligus margin. Urutan atas, kanan, bawah dan kiri.

Contoh kod:

div {
  margin: 10px 20px 30px 40px; /* 上右下左的外边距分别设置为 10px, 20px, 30px 和 40px */
}

6 Nota

1. Jdar akan bertindih (iaitu bergabung): apabila dua berturut-turut. kotak disusun secara menegak, jidar menegaknya akan bertindih, dan yang lebih besar akan digunakan sebagai jidar akhir.
2. Margin tidak mempunyai kesan pada elemen kedudukan mutlak: Jika sesuatu elemen diposisikan secara mutlak berbanding dengan blok yang mengandunginya, jidarnya tidak akan memberi kesan pada kotak lain.
3. Margin tidak sah untuk unsur terapung: jidar unsur terapung tidak menjejaskan jidar unsur lain, dan jidar unsur lain tidak menjejaskan kedudukan unsur terapung.
4. Margin hanya akan mempengaruhi jidar kiri dan kanan unsur sebaris, tetapi bukan jidar atas dan bawah.

Kesimpulan:
Melalui pengenalan artikel ini, kami memahami penggunaan asas dan langkah berjaga-jaga atribut margin dalam CSS. Dalam pembangunan sebenar, penggunaan atribut margin yang munasabah dan fleksibel boleh membawa lebih banyak kemungkinan dan keindahan kepada reka bentuk web. Saya harap artikel ini dapat membantu pembaca mempelajari dan menggunakan sifat margin CSS.

Atas ialah kandungan terperinci Panduan untuk sifat jidar CSS: margin-atas, margin-kanan, margin-bawah dan margin-kiri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!