Properti yang akan saya bahas kali ini adalah box-sizing. Properti ini mempengaruhi cara penentuan ukuran elemen HTML. Jika kalian belum mengubah nilai properti box-sizing properti width dan height hanya menentukan ukuran berdasarkan konten. Ukuran border dan padding akan dihitung secara terpisah sebelum ditambahkan.
Properti box-sizing memiliki 2 nilai yang bisa digunakan selain initial dan inherit. Nilai tersebut adalah border-box dan content-box. Bedanya bisa kalian lihat langsung dengan menerapkannya dalam kode HTML.
.styleku{
height:100%;
background : green;
color : brown;
}
.styleku *{
background : yellow;
}
.styleku1{
padding : 16px;
margin-left : 16px;
border : solid 4px blue;
height : 40%;
width : 80%;
box-sizing : content-box;
}
.styleku2{
padding : 16px;
margin-left : 16px;
border : solid 4px blue;
height : 40%;
width : 80%;
background : Yellow;
box-sizing : border-box;
}Kode HTML-nya bisa kalian buat sendiri. Kalian juga bisa menggunakan kode HTML di bawah ini jika malas mengetik.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<link rel="stylesheet" href="cssku.css">
</HEAD>
<BODY>
<h2>Judul</h2>
<Div class= "styleku">
<div class="styleku1">
<p>ini paragraf 1</p>
<p>ini paragraf 2</p>
<p>ini paragraf 3</p>
<p>ini paragraf 4</p>
</div>
<div class="styleku2">
<p>ini paragraf 5</p>
<p>ini paragraf 6</p>
<p>ini paragraf 7</p>
<p>ini paragraf 8</p>
</div>
</div>
</BODY>
</HTML>
Selain box-sizing properti lain pada dua elemen div yang memiliki class styleku1 dan styleku2 sama semuanya. Properti yang berbeda nilainya hanya box-sizing. Walaupun begitu, ada perbedaan yang bisa terlihat dengan sangat jelas.
Nilai border-box pada properti box-sizing membuat padding dan border dimasukkan ke dalam ukuran elemen. Jadi, saat border dan padding diubah, ukuran elemen akan tetap sama. Ini berbeda dengan content-box yang menganggap ukuran border dan padding sebagai ukuran yang terpisah.