Pada tutorial sebelumnya, kita sudah mempelajari tentang Tutorial Belajar CSS Bagian 27 : Cara Mengatur User Interface di CSS. Selanjutnya, kita akan mempelajari cara mengatur box sizing di CSS.
Properti box sizing digunakan untuk mengubah tinggi dan lebar elemen.
Sejak css2, properti box telah bekerja seperti yang ditunjukkan di bawah ini :
width + padding + border = lebar aktual terlihat / dirender dari kotak elemen
height + padding + border = tinggi aktual yang terlihat / dirender dari kotak elemen
Berarti ketika Anda mengatur tinggi dan lebar, akan tampak sedikit lebih besar daripada ukuran yang diberikan, karena elemen border dan padding ditambahkan ke tinggi dan lebar elemen.
Properti sizing CSS2
<html>
<head>
<style>
.div1 {
width: 200px;
height: 100px;
border: 1px solid green;
}
.div2 {
width: 200px;
height: 100px;
padding: 50px;
border: 1px solid pink;
}
</style>
</head>
<body>
<div class = "div1">Tutorial Mbah WP</div><br />
<div class = "div2">Tutorial Mbah WP</div>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut :
Gambar di atas memiliki lebar dan tinggi yang sama dari dua elemen tetapi memberikan hasil yang berbeda, karena yang kedua disertakan properti padding.
Properti box sizing CSS3
<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">Tutorial Mbah WP</div><br />
<div class = "div2">Tutorial Mbah WP</div>
</body>
</html>
Contoh di atas memiliki tinggi dan lebar yang sama dengan ukuran kotak: border-box. di sini hasilnya ditampilkan di bawah.
Browser akan menampilkan hasil sebagai berikut :
Elemen di atas memiliki tinggi dan lebar yang sama dengan box-sizing: border-box sehingga hasilnya selalu sama untuk kedua elemen seperti gambar di atas.
Seomga tutorial ini bisa membantu Anda mempeljari cara mengatur box sizing di CSS.
