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.

Untuk mengawal jarak antara elemen anak, anda boleh menggunakan nilai margin negatif untuk mengimbangi nilai margin unsur induk, seperti kod berikut:

<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;
}

Ini membolehkan elemen kanak-kanak mengekalkan jarak 20 piksel di antara mereka.

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.

2. Ketinggian garisan

Ketinggian baris merujuk kepada ketinggian baris teks dan juga boleh digunakan untuk mengawal jarak antara elemen. Untuk menetapkan ketinggian baris teks, gunakan sifat ketinggian baris.

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

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

3. Terapung

Gunakan atribut apungan untuk mengapungkan elemen ke kedudukan di antara elemen lain. Terapung membolehkan anda melaraskan jarak antara elemen.

div {
  line-height: 40px;
}

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

4. Ringkasan

Menetapkan jarak antara elemen ialah fungsi penting dalam CSS. Jarak luar dan dalam elemen boleh dilaraskan dengan mudah menggunakan ciri margin dan pelapik. Apabila menggunakan kedua-dua sifat ini, anda perlu memberi perhatian kepada kesan model kotak dan sarang elemen. Selain itu, kedudukan, ketinggian garisan dan terapung juga boleh digunakan untuk melaraskan jarak antara elemen Pembangun boleh memilih kaedah yang berbeza mengikut keperluan mereka untuk mencapai susun atur sasaran.

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!