Properti block-size CSS

Definisi dan penggunaan

block-size Atribut menentukan ukuran elemen di arah blok.

Perhatian:Atribut CSS yang berhubungan writing-mode Mendefinisikan arah blok, yang akan mempengaruhi block-size Hasilnya. Untuk halaman berbahasa Inggris, arah blok adalah ke bawah, dan arah teks dari kiri ke kanan.

Atribut CSS block-size dan inline-size Atribut yang berhubungan dengan CSS width dan height Atribut yang mirip, tetapi block-size dan inline-size Atribut tergantung dari arah blok dan arah teks.

Contoh

Contoh 1

Atur ukuran elemen <div> dalam arah blok:

div {
  block-size: 200px;
}

Coba sendiri

Contoh 2

Ketika nilai atribut writing-mode elemen <div> diatur menjadi vertical-rl, arah blok berubah dari vertikal ke horizontal, yang akan mengubah arah efek atribut block-size:

div {
  block-size: 250px;
  writing-mode: vertical-rl;
}

Coba sendiri

Syntaks CSS

inset-block: auto|length|initial|inherit;

Nilai atribut

Nilai Deskripsi
auto Default. Nilai default block-size elemen.
length Tentukan block-size dalam satuan px, pt, cm, dll. Lihat pula:Satuan CSS.
% Tentukan block-size berdasarkan persentase ukuran sumbu yang sebanding dengan induk elemen.
initial Atur atribut ini ke nilai defaultnya. Lihat initial.
inherit Mengambil atribut ini dari elemen induknya. Lihat inherit.

Detil teknis

Nilai default: auto
Inheritsi: Tidak
Produksi animasi: Didukung. Lihat:Atribut yang berhubungan dengan animasi.
Versi: CSS3
Syntaks JavaScript: object.style.blockSize="100px"

Dukungan browser

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

Chrome Edge Firefox Safari Opera
57.0 79.0 41.0 12.1 44.0

Halaman yang berhubungan

Panduan CSS:Ketinggian dan lebar CSS

Panduan CSS:Model kotak CSS

Referensi CSS:aturan height

Referensi CSS:aturan width

Referensi CSS:aturan writing-mode