Elementtien laajeneminen CSS:ssä JavaScriptille

CSS-ominaisuuksien width ja height asetus ei takaa, että elementistä tulee annettua kokoa. Katsotaanpa esimerkkien avulla.

Esimerkki

Nyt elementin koot vastaavat annettuja:

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

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

Esimerkki

Asetetaan nyt elementille ominaisuus padding. Tuloksena elementin todellinen leveys kasvaa ja laajenee annetun arvon verran sisäisen marginain:

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

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

Esimerkki

Myös reunuksen läsnäolo laajentaa elementtiä:

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

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

Esimerkki

Ominaisuus box-sizing mahdollistaa edellä kuvatun käyttäytymisen muuttamisen. Voidaan tehdä niin, että sisäinen marginai eikä reunus laajenna elementtiä. Tätä varten tälle ominaisuudelle on asetettava arvo border-box:

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

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

Kuvatun merkitys

JavaScriptin näkökulmasta kuvattu tilanne ei ole kovin kätevä. Loppujen lopuksi käy niin, että luettuamme ominaisuuden width arvon emme voi olla lainkaan varmoja siitä, että elementin leveys on juuri tämä.