Atribut row-gap CSS

  • Halaman sebelumnya putar
  • Halaman berikutnya scale

Definisi dan penggunaan

Atribut row-gap menentukan jarak antar baris dalam layout kotak elastis atau grid.

Atribut row-gap sebelumnya disebut grid-row-gap.

Lihat juga:

Panduan CSSLayout grid CSS

Panduan CSSLayout kotak elastis CSS

Panduan CSSAtribut gap

Panduan CSSAtribut column-gap

Contoh

Contoh 1

Tentukan jarak 50 pixel antar baris grid:

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

Coba sendiri

Contoh 2: Layout kotak elastis

Atur jarak antar baris dalam layout kotak elastis menjadi 70px:

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

Coba sendiri

Sintaksis CSS

row-gap: length|normal|initial|inherit;
Nilai Deskripsi
length Atur jarak antar baris dengan panjang yang ditentukan atau persen.
normal Nilai default. Menentukan jarak normal antar baris.
initial Setel atribut ini ke nilai defaultnya. Lihat: initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat: inherit.

Detil teknis

Nilai default: normal
Mengambil: Tidak
Pembuatan animasi: Dukung. Lihat atribut yang berbeda. Lihat:Atribut berhubungan dengan animasi.
Versi: Modul Saling Alingkan Khusus Kotak Level 3 CSS
Sintaksis JavaScript: object.style.rowGap="50px"

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini.

layout Chrome IE / Edge Firefox Safari Opera
dalam grid 66 16 61 12 53
dalam kotak elastis 84 84 63 14.1 70
  • Halaman sebelumnya putar
  • Halaman berikutnya scale