CSS-egenskapen box-sizing
tillåter oss att inkludera utfyllnad och kant i ett elements totala bredd och höjd.
Som standard beräknas ett elements bredd och höjd så här:
width + padding + border=faktisk bredd på ett element
höjd + stoppning + kant=faktisk höjd på ett element
Det betyder: När du ställer in bredd/höjd på ett element så dyker elementet ofta upp större än du har ställt in (eftersom elementets kant och stoppning läggs till elementets angivna bredd/höjd).
Följande illustration visar två <div>-element med samma specificerad bredd och höjd:
De två <div>-elementen ovan får olika storlekar i resultatet (eftersom div2 har en stoppning specificerad):
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>Without box-sizing</h1>
<div class="div1">This div is smaller (width is 300px and height is 100px).</div>
<br>
<div class="div2">This div is bigger (width is also 300px and height is 100px).</div>
</body>
</html>
Egenskapen box-sizing
löser det här problemet.
Egenskapen box-sizing
tillåter oss att inkludera utfyllnad och kant i ett elements totala bredd och höjd.
Om du ställer in box-sizing: border-box;
på ett element, ingår stoppning och kant i bredden och höjden:
Här är samma exempel som ovan, med box-sizing: border-box;
läggs till i båda <div>-elementen:
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>With box-sizing</h1>
<div class="div1">Both divs are the same size now!</div>
<br>
<div class="div2">Hooray!</div>
</body>
</html>
Eftersom resultatet av att använda box-sizing: border-box;
är så mycket bättre vill många utvecklare att alla element på deras sidor ska fungera på detta sätt.
Koden nedan säkerställer att alla element är dimensionerade på detta mer intuitiva sätt. Många webbläsare använder redan box-sizing: border-box;
för många formulärelement (men inte alla - vilket är anledningen till att inmatningar och textområden ser olika ut i bredd: 100 %; ).
Att tillämpa detta på alla element är säkert och klokt:
* {
box-sizing: border-box;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
* {
box-sizing: border-box;
}
input, textarea {
width: 100%;
}
</style>
</head>
<body>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br>
Comments:<br>
<textarea name="message" rows="5" cols="30">
</textarea>
<br><br>
<input type="submit" value="Submit">
</form>
<p><strong>Tip:</strong> Try to remove the box-sizing property from the style element and look what happens.
Notice that the width of input, textarea, and submit button will go outside of the screen.</p>
</body>
</html>
Definierar hur ett elements bredd och höjd beräknas: bör de inkluderar stoppning och bårder, eller inte