A propriedade CSS box-sizing nos permite incluir o preenchimento e a borda em a largura e altura total de um elemento.
Por padrão, a largura e a altura de um elemento são calculadas assim:
largura + preenchimento + borda=largura real de um elemento
altura + preenchimento + borda=altura real de um elemento
Isto significa: Quando você define a largura/altura de um elemento, o elemento geralmente aparece maior do que você definiu (porque a borda e o preenchimento do elemento são adicionados à largura/altura especificada do elemento).
A ilustração a seguir mostra dois elementos <div> com o mesmo largura e altura especificadas:
Os dois elementos <div> acima acabam com tamanhos diferentes no resultado (porque div2 tem um preenchimento Especificadas):
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
} Experimente você mesmo →
<!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>
A propriedade box-sizing resolve este problema.
A propriedade box-sizing nos permite incluir o preenchimento e a borda na largura e altura total de um elemento.
Se você definir box-sizing: border-box; em um elemento, o preenchimento e a borda serão incluídos na largura e na altura:
Aqui está o mesmo exemplo acima, com box-sizing: border-box; adicionado a ambos os elementos <div>:
.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;
} Experimente você mesmo →
<!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>
Como o resultado do uso de box-sizing: border-box; é muito melhor, muitos desenvolvedores desejam que todos os elementos em suas páginas funcionem dessa maneira.
O código abaixo garante que todos os elementos sejam dimensionados desta forma mais intuitiva. Muitos navegadores já usam box-sizing: border-box; para muitos elementos de formulário (mas não todos - e é por isso que as entradas e as áreas de texto parecem diferentes em width: 100%; ).
Aplicar isso a todos os elementos é seguro e sábio:
* {
box-sizing: border-box;
}Experimente você mesmo →
<!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>
Define como a largura e a altura de um elemento são calculadas: deve eles incluem preenchimento e bordas, ou não