Deskripsi
Pengertian & Penjelasan box-sizing

box-sizing adalah css property yang digunakan untuk merubah kalkulasi dalam mengukur lebar element.

Sebagaimana diketahui, secara default sebuah konten box (content-box) akan bertambah lebar ukurannya apabila diberi border, padding, height dan width. ketika box-sizing dideklarasikan, maka border, padding dan ukuran sebuah konten box bergantung pada value yang ditentukan.

Syntax
Penggunaan Sintaksis CSS box-sizing

box-sizing: content-box | padding-box | border-box | inherit

Value
Nilai CSS property box-sizing

content-box

Ini adalah nilai default. Lebar dan tinggi (width dan height) hanya menyertakan content, tidak termasuk border, padding dan margin.

padding-box

Lebar dan tinggi (width dan height) berdasarkan padding (sudah termasuk padding) tetapi tidak termasuk border dan margin.

border-box

Lebar dan tinggi (width dan height) berdasarkan padding dan border (sudah termasuk padding dan border) tetapi tidak termasuk margin.

inherit

Value dari property box-sizing mengikuti aturan element induk sebelumnya.

Example
Contoh CSS box-sizing

.container {
  -webkit-box-sizing: border-box; /* Safari/Chrome, WebKit */
  -moz-box-sizing: border-box;    /* Firefox, Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

Gunakan prefix -webkit- untuk dukungan browser webkit (Chrome, Safari) versi lama dan -moz- untuk dukungan browser Gecko (Firefox) versi lama.

Untuk memudahkan pemahaman kode CSS diatas, maka digunakan contoh html-nya sebagai berikut:

<div class="container">
    Konten sebuah website
</div>

Kode diatas dapat dilihat hasilnya pada contoh lengkap demo editor dibawah ini:

Contoh Lengkap
Demo dengan Source Code Editor

Demo Editor
Demo CSS box-sizing
Code Editor