CSS aralık özelliği

Tanım ve kullanım

gap özelliği, flexbox, ağ veya çok sütun düzeninde satır ve sütun arasındaki boşluk genişliğini tanımlayan bir özelliktir. Aşağıdaki özelliklerin kısaltmasıdır:

Dikkat:gap özelliği daha önce grid-gap.

Daha fazla bakınız:

CSS Eğitimleri:CSS Ağ Düzeni

CSS Eğitimleri:CSS Esnek Çerçeve Düzeni

CSS Eğitimleri:CSS Çok Sütun Düzeni

CSS Referans Kılavuzu:row-gap özelliği

CSS Referans Kılavuzu:column-gap özelliği

Örnek

Örnek 1

Satır ve sütun arası boşluğu 50px olarak ayarlayın:

.grid-container {
  gap: 50px;
}

Kişisel olarak deneyin

Örnek 2: Ağ düzeni

Ağ düzeninde satır arası boşluğu 20px, sütun arası boşluğu 50px olarak ayarlayın:

#grid-container {
  display: grid;
  gap: 20px 50px;
}

Kişisel olarak deneyin

Örnek 3: Esnek çerçeve düzeni

Esnek çerçeve düzeninde satır arası boşluğu 20px, sütun arası boşluğu 70px olarak ayarlayın:

#flex-container {
  display: flex;
  gap: 20px 70px;
}

Kişisel olarak deneyin

Örnek 4: Çok sütun düzeni

Çok sütun düzeninde sütun arası boşluğu 50px olarak ayarlayın:

#newspaper {
  columns: 3;
  gap: 50px;
}

Kişisel olarak deneyin

CSS dilbilgisi

gap: row-gap column-gap|initial|inherit;
Değer Tanım
row-gap Ağ veya esnek çerçeve düzeninde satırlar arasındaki boşluk genişliğini ayarlayın.
column-gap Ağ, esnek çerçeve veya çok sütun düzeninde sütunlar arasındaki boşluk genişliğini ayarlayın.
initial Bu özelliği varsayılan değerine ayarlayın. Bakınız initial.
inherit Bu özelliği ebeveyn elementinden devralır. Bakınız inherit.

Teknik ayrıntılar

Varsayılan değer: normal normal
Devralma: Hayır
Animasyon yapımı: Destekleniyor. Ayrıntılı özelliklere bakın:Animasyonla ilgili özellikler.
Sürüm: CSS Box Alignment Module Level 3
JavaScript dilbilgisi: object.style.gap="50px 100px"

Tarayıcı desteği

Tablodaki numaralar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

Düzen Chrome IE / Edge Firefox Safari Opera
Grid'de 66 16 61 12 53
Elastic frame'de 84 84 63 14.1 70
Çok sütunlu 66 16 61 Desteklenmiyor 53