logo   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>




















x
x