Belajar CSS Cara Menggunakan 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 valueyang ditentukan.
Syntax
Penggunaan Sintaksis CSS box-sizing
box-sizing: content-box | padding-box | border-box | inheritValue
Nilai CSS property box-sizing
Ini adalah nilai default. Lebar dan tinggi (width dan height) hanya menyertakan content, tidak termasuk border, padding dan margin.
Lebar dan tinggi (width dan height) berdasarkan padding (sudah termasuk padding) tetapi tidak termasuk border dan margin.
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
Contoh source code lengkap disertai dengan link “editor” untuk mencoba (try it) dan melihat hasil (preview) kode.
<!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>
Di Edusoft Center Juga Ada Berbagai Kursus Untuk Menambah Skil Anda … www.edusoftcenter.com
Info Selengkapnya Bisa
Office : 0271 745 2187
No XL : 08180 4542 586 (WA & Telegram Ada)
No Simpati : 082 22922 2121
atau
Bisa Langsung Registrasi Online lewat Formulir Online:
www.edusoftcenter.com