Cara Menggunakan Properti CSS Gap

atribut: mudah mengawal jarak elemen gap

mata teras

CSS

Properties membolehkan pemaju dengan mudah mengawal jarak mendatar dan menegak antara unsur -unsur, menyelesaikan banyak masalah susun atur dan memudahkan pengurusan margin. Ia serasi dengan susun atur grid, susun atur flexbox, dan susun atur pelbagai lajur.

Hartanah
• gap boleh menerima dua nilai: jarak baris dan jarak lajur. Apabila hanya satu nilai yang ditentukan, nilai itu digunakan untuk kedua -dua baris dan lajur. Nilai jarak boleh menjadi unit panjang, peratusan, atau bahkan nilai yang dikira menggunakan fungsi
.
• gap calc() Ciri-ciri sesuai untuk grid CSS, flexbox, dan susun atur multi-lajur. Ia berfungsi dengan lancar dalam susun atur responsif, dengan arah jarak menyesuaikan secara automatik mengikut susunan kotak. Anda juga boleh menggunakan untuk menetapkan jarak elemen teks dengan menetapkan bekas teks ke
dan menambah nilai
• . gap display: grid manakala sifat gap susun atur grid pada asalnya dipanggil
, adalah yang terbaik untuk berpegang pada
• kerana kini sesuai untuk grid, flexbox, dan susun atur multi-lajur. Walau bagaimanapun, dalam beberapa kes, sifat penjajaran seperti gap dan grid-gap boleh menyebabkan item dilangkau di luar nilai gap. Juga ambil perhatian bahawa justify-content tidak menerima nilai negatif. align-content gap gap Artikel ini akan meneroka secara mendalam penggunaan atribut CSS
, yang dapat dengan mudah menambah jarak unsur dan menyelesaikan banyak masalah susun atur yang telah melanda pemaju selama bertahun-tahun.

gap Penggunaan atribut

Atribut

gap membolehkan kita menambah jarak mendatar dan menegak antara unsur -unsur. Sudah tentu, kita sentiasa boleh menggunakan

untuk mencapai matlamat ini. Walau bagaimanapun, dengan menggunakan

untuk menetapkan jarak projek boleh menjadi rumit -terutamanya apabila projek membungkus -kerana projek terakhir akan sentiasa mempunyai margin tambahan. gap margin Imej berikut menunjukkan empat div yang menggunakan margin kiri dan kanan dan bawah untuk menetapkan jarak: margin

Sila periksa contoh pada Codepen:

harta CSS GAP: Menggunakan margin dan bukannya GAP

<code class="language-css">article > div {
  margin: 0 10px 10px 0;
}</code>

Perhatikan bahawa latar belakang bekas diserlahkan di sebelah kanan dan bawah? Atribut

hanya menambah jarak antara item

, yang menjadikan susun atur sangat mudah. Berikut adalah susun atur yang sama seperti di atas, tetapi masa ini digunakan

bukannya gap: Sila periksa contoh pada Codepen: Property CSS Gap: Item jarak dengan jurang shorthand gap margin

Sekarang kita tidak akan mempunyai jarak tambahan yang hodoh di sebelah kanan dan bawah. Jarak kini hanya di antara projek, dan projek -projek diatur rapat di dalam bekas.

<code class="language-css">article {
  display: grid;
  gap: 10px;
}</code>

kita boleh menggunakan dengan tiga mod susun atur yang berbeza: grid, flexbox, dan multi-lajur. Kami akan memperkenalkan setiap mod mengikut urutan di bawah.

Panduan untuk menggunakan sifat

menggunakan gap semudah menulis gap: 10px. (Kami melihat hasil melakukan ini dalam demo di atas.) Tetapi mari lihat apa maksudnya.

gap Atribut boleh menerima dua nilai: jarak baris (iaitu jarak antara baris elemen) dan jarak lajur (iaitu jarak antara lajur elemen): gap: <row-gap> <column-gap></column-gap></row-gap>.

Jika kita menentukan hanya satu nilai, ia akan digunakan untuk semua baris

dan lajur.

kita juga boleh menggunakan sifat

dan row-gap untuk menentukan jarak lajur atau jarak baris masing -masing. column-gap Nilai

boleh menjadi unit panjang (seperti px, em, vw), unit peratusan, atau bahkan nilai yang dikira menggunakan fungsi gap. calc()

Cara Menggunakan Properties

gap dalam grid CSS

kita melihat contoh di atas menggunakan

dengan susun atur grid. Mari cuba contoh lain menggunakan unit yang berbeza: gap

<code class="language-css">article > div {
  margin: 0 10px 10px 0;
}</code>

Sila periksa contoh pada Codepen:

harta CSS GAP: Menggunakan Gap dengan Grid Longhand

Kali ini, kami menggunakan unit yang berbeza untuk baris dan lajur.

Manfaat tambahan

adalah bahawa ia berfungsi dengan lancar dalam susun atur responsif. Jika kami menetapkan jarak antara dua item, jarak itu akan dikenakan tanpa mengira sama ada item itu disusun bersebelahan atau ke atas atau ke bawah, seperti yang ditunjukkan dalam contoh di bawah. gap

sila periksa contoh di Codepen:

untitled

Tekan butang 0.5x di bahagian bawah codepen di atas, atau buka codepen dalam penyemak imbas anda dan melebarkan dan sempit viewport untuk melihat bagaimana arah jarak diselaraskan mengikut susunan kotak. Kami mendapat manfaat di sini dari satu nilai pada harta

, yang boleh digunakan untuk baris dan lajur. Jika kita tidak mahu jarak garis pada skrin yang lebih kecil, kita boleh menetapkan gap sebaliknya. Cuba ini dalam codepen di atas. column-gap: 10px

Untuk maklumat lanjut mengenai cara menggunakan susun atur grid, lihat panduan susun atur grid CSS kami.

Cara Menggunakan Properties

gap di Flexbox

Apabila Flexbox mula -mula muncul, ia tidak mempunyai atribut

, jadi kami terpaksa berpaling kepada cara kuno dan menyakitkan untuk menggunakan gap. Syukurlah, menggunakan margin dalam pelayar moden kini arus perdana dan disokong dengan baik. gap

kita boleh menggunakannya seperti yang kita lakukan dalam grid:

<code class="language-css">article {
  display: grid;
  gap: 10px;
}</code>

Sila periksa contoh pada Codepen:

Property CSS Gap: Menggunakan Gap dengan Flexbox

Dalam hal Projek Flex Project Responsive Breaks, tetapan gap akan diselaraskan seperti yang diperlukan dan biasanya tidak akan menyelaraskan dalam kedua -dua arah menegak dan mendatar, seperti yang ditunjukkan dalam contoh di bawah.

Sila periksa contoh pada Codepen: harta CSS GAP: Menggunakan GAP dengan susun atur Flexbox responsif

Jika kita mahu jarak untuk menyelaraskan secara mendatar dan menegak, lebih baik menggunakan grid.

seperti grid, jika kita hanya mahu menetapkan jarak antara lajur atau baris, kita boleh menggunakan column-gap dan row-gap masing -masing.

Cara Menggunakan Properties gap

dalam susun atur multi-lajur

susun atur multi-lajur menganjurkan kandungan ke dalam lajur, tetapi secara lalai, lajur ini akan mempunyai jarak 1EM yang ditetapkan oleh penyemak imbas. Kita boleh menggunakan harta untuk menetapkan lebar jarak pilihan kita: gap

<code class="language-css">article > div {
  margin: 0 10px 10px 0;
}</code>

Sila periksa contoh pada Codepen:

Properti CSS GAP: Menggunakan GAP dalam susun atur pelbagai lajur

(cuba keluarkan atribut

dari codepen di atas untuk melihat apa yang berlaku.) gap

Kerana kita hanya memproses lajur di sini, kita hanya menggunakan nilai jarak lajur, kerana tidak ada baris yang boleh menggunakan nilai ini.

untuk bersenang -senang, kami juga menambah garis menegak antara lajur ini:

<code class="language-css">article {
  display: grid;
  gap: 10px;
}</code>

Sila periksa contoh pada Codepen:

Harta CSS GAP: Menggunakan Gap dan Kolum-Peraturan dalam Layout Multi-Column

Sila ambil perhatian bahawa

adalah singkatan untuk , column-rule dan column-rule-width. column-rule-style column-rule-color tentang

maklumat berguna mengenai atribut

Atribut gap susun atur grid

pada asalnya dipanggil

, dan bentuk penuhnya ialah gap dan grid-gap. Walaupun sifat-sifat ini masih sah, lebih baik untuk melekat dengan grid-row-gap kerana kini sesuai untuk susun atur grid, flexbox, dan pelbagai lajur. grid-column-gap gap Susun atur multi-lajur mempunyai harta yang lebih tua, yang masih sah juga. Tetapi sekali lagi, lebih mudah untuk diingat

dalam semua kes.

column-gap Jarak boleh ditetapkan sebagai nilai peratusan, tetapi peratusannya adalah relatif kepada berapa peratusan? Ia sebenarnya bergantung kepada banyak faktor dan sukar untuk diramal. Anda boleh meneroka ini lebih lanjut dalam spesifikasi. Sebagai peraturan umum, lebih baik untuk mengelakkan penggunaan peratusan dalam gap kecuali anda benar -benar tahu apa yang anda lakukan.

Ciri -ciri penjajaran seperti

gap dan

juga boleh memisahkan unsur -unsur dalam susun atur grid dan flexbox, dan dalam beberapa kes mereka akan menyebabkan item menjadi jarak di luar nilai

. Walau bagaimanapun, nilai justify-content masih berguna kerana ia memberikan jarak minimum align-content antara unsur -unsur pada skrin yang lebih kecil. gap

Mengapa tidak menggunakan gap untuk menetapkan jarak semua elemen?

Seperti yang disebutkan di atas, gap menyelesaikan beberapa isu menjengkelkan yang berkaitan dengan jarak margin. Isu margin ini juga boleh menjejaskan teks dan kandungan lain. Sebagai contoh, jika kita menggunakan margin bawah untuk menetapkan jarak elemen teks (seperti perenggan dan tajuk), maka akan ada margin tambahan selepas elemen terakhir, atau jika kita menggunakan margin teratas, elemen pertama mungkin kelihatan lebih tinggi margin. Terdapat beberapa cara mudah untuk menyelesaikan masalah ini di CSS, tetapi ia masih rumit, dan sesetengah pemaju memutuskan untuk menggunakan gap sebaliknya.

Untuk menggunakan gap untuk menetapkan jarak elemen teks, kami hanya menetapkan bekas teks ke display: grid dan tambah nilai gap:

<code class="language-css">article > div {
  margin: 0 10px 10px 0;
}</code>

The

<code><p></p> , <h1></h1>, <h2></h2> dan <hr> unsur -unsur kini item grid. Sila periksa contoh pada Codepen: Hartanah CSS Gap: Kandungan Teks jarak dengan Gap

tetapi adakah kita harus melakukan ini? Satu kelemahan adalah bahawa semua elemen jarak jauh, dan mengubah jarak antara unsur -unsur, terutama di sekitar tajuk, mungkin lebih menarik secara visual. Walau bagaimanapun, ia masih merupakan idea yang menarik untuk digunakan gap untuk ini. Untuk meneroka ini, lihat video yang sangat menarik Kevin Powell tentang menetapkan jarak teks menggunakan gap.

Ringkasan

gap Properties adalah alat yang mudah untuk menetapkan jarak projek apabila menggunakan susun atur grid, flexbox, dan multi-lajur. Ia membolehkan kita tidak lagi perlu menggunakan kaedah margin yang lama. Ia boleh digunakan dengan cara yang kreatif dalam reka bentuk, tetapi jangan terlalu banyak menggunakannya!

bacaan selanjutnya

• Baca lebih lanjut mengenai susun atur grid CSS
• baca lebih lanjut mengenai susun atur flexbox
• Baca lebih lanjut mengenai susun atur multi-kolumn CSS
• Baca maklumat mengenai modul penjajaran kotak CSS Tahap 3 spesifikasi atau MDN mengenai atribut gap

CSS gap FAQ sifat

Apakah sifat CSS gap?

atribut CSS

adalah atribut disingkat untuk gap dan row-gap. Ia menentukan saiz jarak antara baris dan lajur dalam susun atur grid, flex, atau multi-kolumn. Harta ini amat berguna dalam mewujudkan susun atur CSS yang menarik dan berstruktur dengan baik. Ia membantu mengekalkan jarak dan penjajaran yang konsisten dalam elemen reka bentuk. column-gap

CSS

Bagaimana atribut berfungsi? gap

CSS

Properties berfungsi dengan menetapkan saiz jarak (ruang) antara baris dan lajur. Nilai pertama yang anda berikan akan menetapkan jarak baris dan nilai kedua akan menetapkan jarak lajur. Jika anda hanya memberikan satu nilai, ia akan menetapkan kedua -dua baris dan jarak lajur pada nilai itu. Sebagai contoh, gap menetapkan jarak baris hingga 10px dan jarak lajur hingga 20px. gap: 10px 20px

Bolehkah saya menggunakan atribut CSS gap di Flexbox?

Ya, anda boleh menggunakan atribut CSS gap dalam Flexbox. Ia membolehkan anda membuat jarak antara projek flex. Walau bagaimanapun, sila ambil perhatian bahawa ciri ini mungkin tidak disokong dalam semua pelayar, terutamanya dalam pelayar yang lebih tua. Sentiasa periksa keserasian pelayar sebelum menggunakannya.

Apakah perbezaan antara

dan gap dalam grid-gap?

Atribut

grid-gap adalah atribut disingkat untuk grid-row-gap dan grid-column-gap, didedikasikan untuk susun atur grid. Walau bagaimanapun, modul susun atur grid CSS tahap 2 telah menggantikan grid-gap dengan gap. Sekarang, gap boleh digunakan untuk susun atur grid, flex, dan multi-lajur.

Bagaimana menggunakan sifat CSS gap dalam reka bentuk responsif?

Anda boleh menggunakannya dalam reka bentuk responsif dengan menetapkan atribut CSS gap menggunakan unit relatif seperti peratusan atau unit viewport. Dengan cara ini, saiz jarak akan diselaraskan dengan saiz viewport atau elemen induk, menjadikan susun atur anda responsif.

Bolehkah saya menggunakan nilai negatif dalam atribut CSS gap?

Tidak, anda tidak boleh menggunakan nilai negatif dalam atribut CSS gap. gap

CSS

Apakah nilai lalai atribut? gap Nilai lalai atribut adalah

, yang bermaksud bahawa penyemak imbas akan menentukan saiz jarak. Walau bagaimanapun, anda boleh mengatasi nilai lalai ini dengan menentukan saiz jarak yang dikehendaki. gap normal Bolehkah saya menggunakan atribut CSS

dalam susun atur pelbagai kolumn?

gap Ya, anda boleh menggunakan atribut CSS

dalam susun atur multi-kolumn. Ia membolehkan anda menetapkan jarak antara lajur dalam susun atur pelbagai lajur.

gap CSS

Adakah atribut yang diwarisi?

gap tidak, atribut CSS

tidak akan diwarisi. Ini bermakna saiz jarak yang ditentukan untuk elemen induk tidak digunakan untuk elemen anaknya.

gap unit apa yang boleh saya gunakan dalam atribut CSS

?

gap Anda boleh menggunakan pelbagai unit dalam atribut CSS

, termasuk piksel (PX), EM (EM), REM (REM), peratusan (%), dan unit Viewport (VW, VH). Setiap unit mempunyai kes penggunaan sendiri yang boleh digunakan mengikut keperluan khusus anda.

gap Sila ambil perhatian bahawa semua pautan codepen adalah ruang letak dan perlu digantikan dengan pautan yang tersedia.

Atas ialah kandungan terperinci Cara Menggunakan Properti CSS Gap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!