CSS3 - Ukuran Kotak
Properti ukuran kotak 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 terlihat / dirender dari kotak elemen
Berarti ketika Anda mengatur tinggi dan lebar, itu tampak sedikit lebih besar daripada ukuran yang diberikan karena elemen boarder dan padding ditambahkan ke tinggi dan lebar elemen.
Properti ukuran 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">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>Ini akan menghasilkan 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 ukuran kotak 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">TutorialsPoint.com</div><br />
<div class = "div2">TutorialsPoint.com</div>
</body>
</html>Sampel di atas memiliki tinggi dan lebar yang sama dengan box-sizing:border-box. di sini hasilnya ditunjukkan di bawah.
Ini akan menghasilkan 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.