Bagaimana untuk menetapkan jarak dalam css

CSS ialah bahagian yang amat diperlukan dalam reka bentuk web. Ia boleh mengawal gaya, reka letak dan kesan interaktif halaman web. Antaranya, menetapkan jarak antara elemen adalah salah satu fungsi penting CSS. Artikel ini akan memperkenalkan cara untuk menetapkan jarak dalam CSS dan menggunakan kaedah yang berbeza untuk melaraskan jarak antara elemen.

1. Jarak dalam CSS

Dalam CSS, sifat margin dan padding biasanya digunakan untuk menetapkan jarak antara elemen. Kedua-dua sifat mengawal ruang putih di sekeliling sempadan elemen, tetapi ia melakukan perkara yang berbeza.

1. Margin

Margin merujuk kepada jarak luar di sekeliling elemen, iaitu jarak antara elemen dan elemen lain. Margin boleh mempunyai empat nilai, masing-masing mewakili jarak di bahagian atas, kanan, bawah dan kiri Ia juga boleh mempunyai dua nilai yang mewakili jarak antara bahagian atas, bawah dan kiri. Ia juga boleh mempunyai satu sahaja nilai yang mewakili jarak yang sama dalam empat arah.

Sebagai contoh, kod berikut menetapkan jarak atas dan bawah di sekeliling elemen h1 kepada 20 piksel dan jarak kiri dan kanan kepada 30 piksel.

h1 {
  margin: 20px 30px;
}

2. pelapik

lapik merujuk kepada jarak dalaman di sekeliling elemen, iaitu jarak antara kandungan elemen dan sempadan. Padding juga boleh mempunyai empat nilai, masing-masing mewakili jarak dalam arah atas, kanan, bawah dan kiri Ia juga boleh mempunyai dua nilai yang mewakili jarak atas, bawah dan kiri, atau ia boleh mempunyai hanya satu nilai. mewakili jarak yang sama dalam empat arah.

Sebagai contoh, kod berikut menetapkan jarak atas dan bawah di sekeliling elemen div kepada 20 piksel dan jarak kiri dan kanan kepada 30 piksel.

div {
  padding: 20px 30px;
}

2. Nota tentang penggunaan jidar dan pelapik

1. daripada model kotak. Model kotak membahagikan elemen kepada empat bahagian: kawasan kandungan, kawasan padding, kawasan sempadan dan kawasan margin. Apabila menetapkan jarak elemen, pertimbangkan pengaruh empat bahagian ini.

2. Sarang unsur

Dalam kes sarang unsur, nilai margin unsur anak dan nilai jidar unsur induk mungkin mempengaruhi satu sama lain. Di sinilah teknik tambahan diperlukan untuk mengawal jarak.

Sebagai contoh, kod di bawah menunjukkan elemen induk dan dua elemen anak. Katakan elemen kanak-kanak perlu dipisahkan 20 piksel, tetapi disebabkan jidar, jarak antara elemen tersebut akan menjadi lebih besar.

<div>
  <p>Child element 1</p>
  <p>Child element 2</p>
</div>

div {
  background-color: #ccc;
  margin: 50px;
  padding: 20px;
}

p {
  background-color: #eee;
  margin: 20px;
}

p:first-child {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

div {
  background-color: #ccc;
  margin: 50px;
  padding: 20px;
}

p {
  background-color: #eee;
  margin: 20px 0;
}

p + p {
  margin-top: -20px;
}

3. Gunakan kaedah lain untuk melaraskan jarak elemen

Selain menggunakan atribut margin dan padding, anda juga boleh menggunakan kaedah lain untuk melaraskan jarak elemen.

1. Kedudukan membolehkan anda melaraskan jarak antara elemen.

Sebagai contoh, kod berikut bermakna jarak antara dua elemen ialah 50 piksel.

div:nth-child(2) {
  position: relative;
  top: 50px;
}

Sebagai contoh, kod berikut menetapkan ketinggian garisan antara dua elemen kepada 40 piksel.

div {
  line-height: 40px;
}

Sebagai contoh, kod berikut mengapungkan kedua-dua elemen ke kiri dan menetapkan jarak antaranya kepada 20 piksel.

div {
  float: left;
  margin-right: 20px;
}

Atas ialah kandungan terperinci Bagaimana untuk menetapkan jarak dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!