Section Artikel
Ukuran Kotak CSS
Properti CSS box-sizing berfungsi untuk kita memasukkan padding dan border dalam total lebar dan tinggi elemen.
Tanpa Properti ukuran kotak CSS
Secara default, lebar dan tinggi elemen dihitung seperti ini:
width + padding + border = lebar sebenarnya dari sebuah elemen
height + padding + border = tinggi sebenarnya dari sebuah elemen
Artinya: Saat kita menyetel lebar / tinggi elemen, elemen sering kali tampak lebih besar dari yang kita tetapkan (karena batas dan bantalan elemen ditambahkan ke lebar / tinggi elemen yang ditentukan).
Ilustrasi berikut menunjukkan dua elemen dengan lebar dan tinggi yang ditentukan sama:
Contoh:
<!DOCTYPE html> <html> <head> <style> .div1 { width: 300px; height: 100px; border: 1px solid blue; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; } </style> </head> <body> <div class="div1">This div is smaller (width is 300px and height is 100px).</div> <br> <div class="div2">This div is bigger (width is also 300px and height is 100px).</div> </body> </html>
Ilustrasi berikut menunjukkan dua elemen <div> dengan lebar dan tinggi yang ditentukan sama:
Kedua elemen <div> di atas berakhir dengan ukuran yang berbeda pada hasilnya (karena div2 memiliki padding yang ditentukan):
Jika menggunakan properti box-sizing masalah seperi ini akan terpecahkan.
Dengan Properti Box-Sizing CSS
Properti box-sizing berfungsi untuk kita memasukkan padding dan perbatasan dalam total lebar dan tinggi elemen.
Jika kita menyetel box-sizing: border-box; pada sebuah elemen, padding dan border disertakan dalam lebar dan tinggi:
Berikut adalah contoh yang sama seperti di atas, dengan box-sizing: border-box; yang ditambahkan ke kedua elemen <div> :
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="div1">Both divs are the same size now!</div>
<br>
<div class="div2">Hooray!</div>
</body>
</html>
Karena hasil menggunakan box-sizing: border-box; jauh lebih baik, banyak pengembang ingin semua elemen di laman mereka bekerja dengan cara ini.
Kode di bawah memastikan bahwa semua elemen diukur dengan cara yang lebih intuitif ini. Banyak browser sudah menggunakan box-sizing: border-box; untuk banyak elemen formulir (tetapi tidak semua – itulah sebabnya input dan area teks terlihat berbeda pada lebarnya: 100%;). Menerapkan ini ke semua elemen meupakan tindakan yang cukup amandan baik.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
* {
box-sizing: border-box;
}
input, textarea {
width: 100%;
}
</style>
</head>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br>
Comments:<br>
<textarea name="message" rows="5" cols="30">
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
<p><strong>Tip:</strong> Try to remove the box-sizing property from the style element and look what happens.
Notice that the width of input, textarea, and submit button will go outside of the screen.</p>
</body>
</html>
Properti Box Sizing CSS
| Properti | Deskripsi |
|---|---|
| box-sizing | Mendefinisikan bagaimana lebar dan tinggi elemen dihitung: apakah harus menyertakan padding dan border, atau tidak |
