Het ongedaan maken van elementuitbreiding in CSS
Over het algemeen is de uitbreiding die in eerdere lessen werd beschreven schadelijk
en zou je er graag vanaf willen. Hiervoor
is er in CSS de eigenschap box-sizing.
Als je deze de waarde border-box geeft,
dan zullen noch padding, noch de rand
het blok uitbreiden:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
background: #f1f1f1;
margin-bottom: 20px;
}
#elem2 {
width: 100px;
height: 100px;
background: #f1f1f1;
padding: 25px; /* stel padding in */
border: 10px solid green; /* stel rand in */
box-sizing: border-box; /* maak uitbreiding ongedaan */
}
:
Probeer de beschreven eigenschap
box-sizing zelf uit.
