Penjelasan terperinci tentang sifat sempadan CSS: padding, margin dan sempadan

Penjelasan terperinci tentang sifat sempadan CSS: pelapik, jidar dan sempadan

CSS ialah bahasa helaian gaya yang digunakan untuk mengawal dan susun atur elemen halaman web. Dalam reka bentuk web, atribut sempadan adalah salah satu bahagian yang paling penting. Artikel ini akan memperkenalkan secara terperinci cara menggunakan atribut sempadan dalam CSS dan memberikan contoh kod khusus.

1. padding (padding)

properti padding digunakan untuk menetapkan padding sesuatu elemen, iaitu ruang antara kandungan elemen dan sempadan elemen. Kita boleh menetapkan saiz padding menggunakan nombor positif atau nilai peratusan. Pelapik boleh ditetapkan ke arah atas, kanan, bawah dan kiri masing-masing, atau ia boleh ditetapkan kepada nilai bersatu sekaligus. Berikut ialah beberapa kod sampel biasa:

.container {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

/* 或者使用统一的数值设置 */
.container {
  padding: 10px;
}

2. margin (margin)

sifat margin digunakan untuk menetapkan jidar unsur, iaitu ruang antara sempadan unsur dan sempadan unsur bersebelahan. Sama seperti atribut padding, kita juga boleh menggunakan nombor positif atau nilai peratusan untuk menetapkan saiz margin. Jidar juga boleh ditetapkan ke arah atas, kanan, bawah dan kiri masing-masing, atau ia boleh ditetapkan kepada nilai bersatu sekaligus. Berikut ialah beberapa kod sampel biasa:

.container {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

/* 或者使用统一的数值设置 */
.container {
  margin: 10px;
}

3. sempadan (sempadan)

atribut sempadan digunakan untuk menetapkan gaya sempadan, lebar dan warna elemen. Terdapat banyak jenis gaya sempadan, seperti garis pepejal, garis putus-putus, garis putus-putus, dsb., yang boleh ditetapkan melalui gaya sempadan. Lebar sempadan boleh ditetapkan sebagai nilai tetap atau nilai peratusan, atau menggunakan kata kunci. Warna sempadan boleh ditetapkan sebagai nilai heksadesimal, nilai RGB atau nama warna. Berikut ialah beberapa kod sampel biasa:

.container {
  border-top: 1px solid #000;
  border-right: 2px dashed #ff0000;
  border-bottom: 3px dotted rgb(255, 0, 0);
  border-left: 4px double blue;
}

.container {
  border: 1px solid black;
}

Selain kaedah di atas untuk menetapkan sifat sempadan secara individu, kami juga boleh menggabungkannya untuk menetapkan gaya sempadan unsur. Berikut ialah contoh:

.container {
  padding: 10px;
  margin: 10px;
  border: 1px solid black;
}

Dalam contoh ini, padding elemen, jidar dan jidar semuanya ditetapkan kepada 10px dan jidar ialah garis hitam pejal selebar 1px.

Ringkasan:

Atribut sempadan (lapik, jidar dan jidar) ialah bahagian CSS yang sangat penting dan digunakan untuk mengawal dan menyusun atur elemen halaman web. Kita boleh menggunakan padding untuk melaraskan jarak antara kandungan elemen dan sempadan elemen; Pada masa yang sama, kita juga boleh menggabungkan sifat sempadan ini untuk menetapkan gaya sempadan elemen.

Saya harap artikel ini dapat membantu pembaca lebih memahami dan menggunakan sifat sempadan dalam CSS, dan memainkan peranan yang lebih besar dalam reka bentuk web.

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