Uitbreiding van elementen in CSS voor JavaScript
Het instellen van de CSS-eigenschappen
width en
height
garandeert niet dat het element de
opgegeven grootte krijgt. Laten we kijken
naar voorbeelden.
Voorbeeld
Momenteel komen de afmetingen van het element overeen met de opgegeven:
<div id="elem">
text
</div>
#elem {
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
}
:
Voorbeeld
Laten we nu de eigenschap
padding instellen voor het element.
Als gevolg zal de werkelijke breedte van het element
groter worden en uitbreiden met de opgegeven waarde
van de binnenafstand:
<div id="elem">
text
</div>
#elem {
padding: 25px;
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
}
:
Voorbeeld
De aanwezigheid van een rand breidt het element ook uit:
<div id="elem">
text
</div>
#elem {
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
border: 20px solid #F0D7A1;
}
:
Voorbeeld
De eigenschap box-sizing
maakt het mogelijk om het bovenstaande gedrag te wijzigen.
Het is mogelijk om ervoor te zorgen dat noch de binnenafstand,
noch de rand het element uitbreiden.
Om dit te doen moet je deze eigenschap
de waarde border-box geven:
<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;
}
:
Belangrijkheid van het beschrevene
Vanuit het oogpunt van JavaScript is de beschreven situatie
niet erg handig. Het blijkt immers dat we, door de
waarde van de eigenschap width te lezen, helemaal niet
zeker kunnen zijn dat het element
precies die breedte zal hebben.
