box-sizing
Ved anvendelse af <div>-bokse er det altid nødvendigt at tælle. Ved samtidig anvendelse af padding og / eller border er det endnu mere nøsvendigt.
Ved traditionel opbygning vil det være nødvendigt at mindske <div>-boksen's størrelse med plads, der opdages af border og / eller padding.
Ved anvendelse af 'box-sizing: border-box;' vendes den traditionelle situation på hovedet. Border og / eller padding placeres inde i <div>-boksen. Padding og / eller border skal nu trækkes fra <div>-boksen's størrelse for at få den plads, der er til rådighed til data og / eller en ny <div>-boks.
'box-sizing: border-box;' giver samme resultat som den traditionelle opbygning.
Nederst vises <div>-bokse med margin og border. Det ses også at 'box-sizing: border-box;' ikke har nogen indflydelse på margin.
x angiver alle steder placeringen af det første tegn i boksen. 'width', 'height', 'padding', 'border' og 'margin' er den samme i alle eksempler.
Default |
x
|
Ren box
<style>
.box01{
width: 250px;
height: 150px;
background-color: red;
}
</style>
<div class="box02"></div>
|
Traditionel padding og border |
x
|
Box med padding
<style>
.box02{
width: 250px;
height: 150px;
background-color: red;
padding: 30px;
}
</style>
<div class="box02"></div>
|
x
|
Box med padding og border
<style>
.box03{
width: 250px;
height: 150px;
background-color: red;
padding: 30px;
border: 10px solid green;
}
</style>
<div class="box03"></div>
|
Padding og border med 'border-box' |
x
|
Box med padding og box-sizing
<style>
.box04{
width: 250px;
height: 150px;
background-color: red;
padding: 30px;
box-sizing: border-box;
}
</style>
<div class="box04"></div>
|
x
|
Box med padding, border og box-sizing
<style>
.box05{
width: 250px;
height: 150px;
background-color: red;
padding: 30px;
border: 10px solid green;
box-sizing: border-box;
}
</style>
<div class="box05"></div>
|
Padding og border med 'content'box' |
x
|
Box med padding og content-sizing
<style>
.box06{
width: 250px;
height: 150px;
background-color: red;
padding: 30px;
box-sizing: content-box;
}
</style>
<div class="box06"></div>
|
x
|
Box med padding, border og content-sizing
<style>
.box07{
width: 250px;
height: 150px;
background-color: red;
padding: 30px;
border: 10px solid green;
box-sizing: content-box;
}
</style>
<div class="box07"></div>
|
Box med margin og border |
x
|
Box med margin
<style>
.box12{
width: 250px;
height: 150px;
background-color: red;
margin: 30px;
}
</style>
<div class="box12"></div>
|
x
|
Box med margin og border
<style>
.box13{
width: 250px;
height: 150px;
background-color: red;
margin: 30px;
border: 10px solid green;
}
</style>
<div class="box13"></div>
|
Box med margin, border og 'box-sizing'. |
x
|
Box med margin
<style>
.box14{
width: 250px;
height: 150px;
background-color: red;
margin: 30px;
box-sizing: border-box;
}
</style>
<div class="box14"></div>
|
x
|
Box med margin og border
<style>
.box15{
width: 250px;
height: 150px;
background-color: red;
margin: 30px;
border: 10px solid green;
}
</style>
<div class="box15"></div>
|
|