Elemek bővítése CSS-ben JavaScript szempontjából

A width és height CSS tulajdonságok beállítása nem garantálja, hogy az elem a megadott méretű lesz. Nézzük meg példákon.

Példa

Most az elem méretei megegyeznek a megadottakkal:

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

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

Példa

Most pedig állítsuk be az elemnek a padding tulajdonságot. Ennek eredményeképpen az elem valódi szélessége megnő és kiterjed a megadott belső margó értékére:

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

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

Példa

A szegély jelenléte szintén kiterjeszti az elemet:

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

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

Példa

A box-sizing tulajdonság lehetővé teszi a fenti viselkedés módosítását. Megtehetjük, hogy sem a belső margó, sem a szegély ne bővítse ki az elemet. Ehhez a tulajdonságnak a border-box értéket kell adni:

<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;
}

A leírtak fontossága

JavaScript szempontjából a leírt helyzet nem túl kényelmes. Hiszen kiderül, hogy a width tulajdonság értékének elolvasása után egyáltalán nem lehetünk biztosak abban, hogy az elem éppen ezen a szélességen lesz.