La propiedad de tamaño de cuadro en CSS define cómo el usuario debe calcular el ancho y el alto total de un elemento, es decir, el relleno y los bordes, si se incluirán o no.
Sintaxis:
box-sizing: content-box|border-box;
Valores de propiedad : todas las propiedades se describen bien con el siguiente ejemplo.
cuadro de contenido: este es el valor predeterminado de la propiedad de tamaño de cuadro. En este modo, las propiedades de ancho y alto incluyen solo el contenido. El borde y el relleno no están incluidos, es decir, si establecemos el ancho de un elemento en 200 píxeles, el cuadro de contenido del elemento tendrá 200 píxeles de ancho y el ancho de cualquier borde o relleno se agregará al ancho renderizado final.
Sintaxis:
box-sizing: content-box;
Ejemplo: este ejemplo ilustra el uso de la propiedad box-sizing cuyo valor se establece en content-box.
HTML
<!DOCTYPE html>
<html>
<head>
<title>box-sizing Property</title>
<style>
div {
width: 200px;
height: 60px;
padding: 20px;
border: 2px solid green;
background: green;
color: white;
}
.content-box {
box-sizing: content-box;
}
</style>
</head>
<body style="text-align: center;">
<h2>box-sizing: content-box</h2>
<br>
<div class="content-box">GeeksforGeeks</div>
</body>
</html>
Producción:
cuadro de borde: en este modo, las propiedades de ancho y alto incluyen contenido, relleno y bordes, es decir, si establecemos el ancho de un elemento en 200 píxeles, esos 200 píxeles incluirán cualquier borde o relleno que hayamos agregado, y el cuadro de contenido se reducirá a absorber ese ancho extra. Por lo general, esto hace que sea mucho más fácil cambiar el tamaño de los elementos.
Sintaxis:
box-sizing: border-box;
Ejemplo: este ejemplo ilustra el uso de la propiedad box-sizing cuyo valor se establece en border-box.
HTML
<!DOCTYPE html>
<html>
<head>
<title>box-sizing Property</title>
<style>
div {
width: 200px;
height: 60px;
padding: 20px;
border: 2px solid green;
background: green;
color: white;
}
.border-box {
box-sizing: border-box;
}
</style>
</head>
<body style="text-align: center;">
<h2>box-sizing: border-box</h2>
<br>
<div class="border-box">GeeksforGeeks</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad de tamaño de cuadro se enumeran a continuación:
- Google Chrome 10.0 4.0 -webkit-
- Internet Explorer 8.0
- Microsoft Edge 12.0
- Firefox 29.0 2.0 -moz-
- Ópera 9.5
- Apple Safari 5.1 3.2 -webkit-
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA