Perluasan Elemen dalam CSS untuk JavaScript

Penetapan properti CSS width dan height tidak menjamin bahwa elemen akan berukuran sesuai yang ditentukan. Mari kita lihat pada contoh-contoh.

Contoh

Saat ini ukuran elemen sesuai dengan yang ditentukan:

<div id="elem">
	text
</div>

#elem {
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
}

Contoh

Dan sekarang mari kita berikan elemen properti padding. Hasilnya, lebar elemen yang sebenarnya akan menjadi lebih besar dan meluas sesuai nilai jarak dalam yang ditentukan:

<div id="elem">
	text
</div>

#elem {
	padding: 25px;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
}

Contoh

Adanya border juga memperluas elemen:

<div id="elem">
	text
</div>

#elem {
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
	border: 20px solid #F0D7A1;
}

Contoh

Properti box-sizing memungkinkan untuk mengubah perilaku yang dijelaskan di atas. Kita dapat membuat agar baik jarak dalam, maupun border tidak memperluas elemen. Untuk itu, properti ini perlu diberi nilai border-box:

<div id="elem">
	text
</div>

#elem {
	box-sizing: border-box;
	padding: 20px;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
	border: 20px solid #F0D7A1;
}

Pentingnya yang Dijelaskan

Dari sudut pandang JavaScript, situasi yang dijelaskan tidak sangat nyaman. Karena ternyata, dengan membaca nilai properti width kita sama sekali tidak bisa yakin bahwa elemen akan berlebar persis seperti itu.