CSS Box-Sizing

CSS Fadlullah Fadul December 3, 2018

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-boxvalue

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

padding-boxvalue

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

border-boxvalue

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

inheritvalue

inherit

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

Example
Contoh CSS box-sizing

CSS 
.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:

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

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

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo CSS box-sizing - apacara.com</title>
    <style>
      div {margin: 1em}

      .ukuran-asli {
        	height: 150px;
      	width: 200px;
          background: #FFFCB5;
      }
      .dengan-border-padding {
      	height: 150px;
      	width: 200px;
      	background: #FFFCB5;
      	border: 10px solid #7B9AD3;
      	padding: 10px;
      }
      .borderbox {
      	-moz-box-sizing: border-box;
      	-webkit-box-sizing: border-box;
      	box-sizing: border-box;
      	height: 150px;
      	width: 200px;
      	background: #FFFCB5;
      	border: 10px solid #7B9AD3;
      	padding: 10px;
      }
      .paddingbox {
      	-moz-box-sizing: padding-box;
      	-webkit-box-sizing: padding-box;
      	box-sizing: padding-box;
      	height: 150px;
      	width: 200px;
      	background: #FFFCB5;
      	border: 10px solid #7B9AD3;
      	padding: 10px;
      }
    </style>
  </head>
  <body>
    <div class="ukuran-asli">
      ukuran asli
    </div>

    <div class="dengan-border-padding">
      diberi border dan padding, ukurannya bertambah besar.
    </div>

    <div class="borderbox">
      <code>box-sizing:border-box</code> - Ukurannya sesuai aslinya: height dan width. Sedangkan border dan padding berada didalamnya
    </div>

    <div class="paddingbox">
      <code>box-sizing:padding-box</code> - Ukurannya berbeda dari yang lain.
    </div>

  </body>
</html>
SHARE
Next Article