La propiedad CSS box-sizing nos permite incluir el relleno y el borde en el ancho y alto total de un elemento.
Por defecto, el ancho y alto de un elemento se calcula así:
ancho + relleno + borde=ancho real de un elemento
altura + relleno + borde=altura real de un elemento
Esto significa: Cuando estableces el ancho/alto de un elemento, el elemento a menudo aparece más grande de lo que ha establecido (porque el borde y el relleno del elemento se agregan al ancho/alto especificado del elemento).
La siguiente ilustración muestra dos elementos <div> con el mismo ancho y alto especificados:
Los dos elementos <div> anteriores terminan con diferentes tamaños en el resultado (porque div2 tiene un relleno especificado):
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
} Pruébelo usted mismo →
<!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>
La propiedad box-sizing resuelve este problema.
La propiedad box-sizing nos permite incluir el relleno y el borde en el ancho y alto total de un elemento.
Si configura box-sizing: border-box; en un elemento, el relleno y el borde se incluyen en el ancho y el alto:
Aquí está el mismo ejemplo anterior, con box-sizing: border-box; agregado a ambos 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;
} Pruébelo usted mismo →
<!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>
Dado que el resultado de usar box-sizing: border-box; es mucho mejor, muchos desarrolladores quieren que todos los elementos de sus páginas funcionen de esta manera.
El siguiente código garantiza que todos los elementos tengan el tamaño de esta forma más intuitiva. Muchos navegadores ya usan box-sizing: border-box; para muchos elementos de formulario (pero no para todos, razón por la cual las entradas y las áreas de texto se ven diferentes en ancho: 100%; ).
Aplicar esto a todos los elementos es seguro y prudente:
* {
box-sizing: border-box;
}Pruébelo usted mismo →
<!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 cómo se calculan el ancho y el alto de un elemento: debe incluyen relleno y bordes, o no