Ukuran kotak - Trik CSS

Anonim

The box-sizingproperti di CSS mengontrol bagaimana model kotak ditangani untuk elemen itu berlaku untuk.

.module ( box-sizing: border-box; )

Salah satu cara yang lebih umum untuk menggunakannya adalah dengan menerapkannya ke semua elemen di halaman, termasuk elemen pseudo:

*, *::before, *::after ( box-sizing: border-box; )

Ini sering disebut "ukuran kotak universal", dan ini cara yang baik untuk bekerja! (Literal) yang widthAnda tetapkan adalah lebar yang Anda peroleh, tanpa harus melakukan matematika mental dan mengelola kompleksitas yang berasal dari lebar yang berasal dari beberapa properti. Kami bahkan memiliki hari kesadaran mengukur ukuran kotak di sekitar sini.

Nilai

  • content-box: default. Nilai lebar dan tinggi hanya berlaku untuk konten elemen. Padding dan border ditambahkan di luar kotak.
  • padding-box: Nilai lebar dan tinggi berlaku untuk konten elemen dan paddingnya. Perbatasan ditambahkan di luar kotak. Saat ini, hanya Firefox yang mendukung padding-boxnilai tersebut.
  • border-box: Nilai lebar dan tinggi berlaku untuk konten, padding, dan batas.
  • inherit: mewarisi ukuran kotak dari elemen induk.

Contoh

Gambar contoh ini membandingkan default content-box(atas) ke border-box(bawah):

Garis merah di antara gambar mewakili nilai lebar elemen. Perhatikan bahwa elemen dengan default box-sizing: content-box;melebihi lebar yang dideklarasikan ketika padding dan border ditambahkan ke luar kotak konten, sedangkan elemen dengan box-sizing: border-box;diterapkan cocok sepenuhnya dalam lebar yang dinyatakan.

Menggunakan Ukuran Kotak

Katakanlah Anda menyetel elemen ke width: 100px; padding: 20px; border: 5px solid black;. Secara default, kotak yang dihasilkan berukuran lebar 150px. Itu karena model ukuran kotak default adalah content-box, yang menerapkan lebar elemen yang dideklarasikan ke isinya saja, menempatkan padding dan batas di luar kotak elemen. Ini secara efektif meningkatkan berapa banyak ruang yang dibutuhkan elemen.

Jika Anda mengubah box-sizingmenjadi padding-box, bantalan akan didorong ke dalam kotak elemen. Kemudian, kotak akan menjadi lebar 110px, dengan 20px padding di bagian dalam dan 10px di bagian luar. Jika Anda ingin meletakkan padding dan border di dalam box, Anda bisa menggunakan border-box. Kotak itu kemudian akan menjadi lebar 100px - perbatasan 10px dan bantalan 20px keduanya didorong ke dalam kotak elemen.

Demo

Lihat Perbandingan Pena dari nilai ukuran kotak oleh CSS-Tricks (@ css-trick) di CodePen.

Terkait

  • width
  • height
  • padding
  • border

Dukungan Browser

Chrome Safari Firefox Opera YAITU Android iOS
Apa saja * † 3 * † 1 ‡ 7 * 8 * 2.1 * † Apa saja *

* padding-boxtidak didukung

† versi lama memerlukan -webkitawalan (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozprefiks diperlukan hingga versi 28, tidak difiksasi pada 29.