Penjelasan terperinci tentang sifat model kotak CSS: padding, margin dan jidar

Penjelasan terperinci tentang atribut model kotak CSS: padding, margin dan jidar

Dalam CSS, atribut model kotak (model kotak) merujuk kepada HTML Ruang yang diduduki oleh elemen. Ruang ini terdiri daripada 4 sifat penting: padding, margin dan border. Memahami perkara yang dilakukan oleh sifat ini dan cara menggunakannya boleh membantu kami mengawal saiz dan reka letak elemen dengan lebih baik. Artikel ini menerangkan sifat ini secara terperinci dan menyediakan contoh kod khusus. Sifat Padding mengawal jarak antara kandungan elemen dan tepinya. Ia boleh menetapkan nilai yang berbeza untuk bahagian atas, bawah, kiri dan kanan elemen, atau ia boleh ditetapkan kepada nilai yang sama secara seragam. Berikut ialah contoh kod:

.box {
  padding: 10px; /* 上下左右都为 10px */
}

.box {
  padding-top: 20px;
  padding-right: 30px;
  padding-bottom: 40px;
  padding-left: 50px; /* 分别指定上右下左的值 */
}

1. Margin (margin)

Sifat margin digunakan untuk mengawal jarak antara elemen dan elemen sekeliling. Ia boleh menetapkan nilai yang berbeza untuk bahagian atas, bawah, kiri dan kanan elemen, atau ia boleh ditetapkan kepada nilai yang sama secara seragam. Berikut ialah contoh kod:

.box {
  margin: 10px; /* 上下左右都为 10px */
}

.box {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 40px;
  margin-left: 50px; /* 分别指定上右下左的值 */
}

2. Border (sempadan)

Atribut sempadan digunakan untuk menambah sempadan pada elemen. Ia mempunyai tiga sub-sifat: lebar sempadan (lebar sempadan), gaya sempadan (gaya sempadan) dan warna sempadan (warna sempadan). Ketiga-tiga sifat ini boleh ditentukan pada masa yang sama atau secara individu. Berikut ialah contoh kod:

.box {
  border: 1px solid black; /* 宽度为 1px，实线样式，黑色边框 */
}

.box {
  border-width: 2px;
  border-style: dashed;
  border-color: red; /* 依次指定宽度、样式和颜色 */
}

Sifat model kotak memainkan peranan penting dalam reka letak dan reka bentuk. Dengan menggunakan sifat pelapik, jidar dan sempadan secara fleksibel, kami boleh mengawal jarak, gaya sempadan dan saiz antara elemen untuk mencapai kesan reka letak halaman yang kaya dan pelbagai.
3. Dalam aplikasi praktikal, adalah sangat penting untuk memahami dan menguasai penggunaan atribut ini. Semoga penjelasan dan contoh dalam artikel ini akan membantu pembaca lebih memahami dan menggunakan sifat model kotak CSS.

Atas ialah kandungan terperinci Penjelasan terperinci tentang sifat model kotak CSS: padding, margin dan jidar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!