La propiedad de tamaño de cuadro define cómo el ancho y el alto de un elemento deben ser visibles para el usuario, es decir, se incluirán o no el borde y el relleno.
Sintaxis:
box-sizing: content-box|border-box;
Valores de propiedad:
- cuadro de contenido ( valor predeterminado )
- border-box: le dice al navegador que los valores especificados para el ancho y alto de un elemento incluirán contenido, relleno y bordes. Por lo general, esto hace que sea mucho más fácil cambiar el tamaño de los elementos. El box-sizing: border-box es el estilo predeterminado que usan los navegadores para los elementos <table>, <select> y <button>. Por ejemplo, si establece el ancho de un elemento en 200 y el alto en 100 píxeles, esos 200 y 100 píxeles incluirán cualquier borde o relleno que haya agregado, y el cuadro de contenido se reducirá para absorber ese ancho y alto adicionales.
Sintaxis:
box-sizing: border-box;
Las dimensiones del elemento se calculan como:
width = border + padding + width of the content height = border + padding + height of the content
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>box-sizing Property</title>
<style>
div {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid orange;
background: green;
color: white;
display: inline-block
}
.box {
box-sizing: border-box;
}
</style>
</head>
<body style="text-align:center;">
<h2>{box-sizing: border-box;}</h2>
<br>
<div class="box">GeeksforGeeks</div>
</body>
</html>
Producción:
La siguiente figura ilustra {box-sizing: border-box:} para el ejemplo anterior.
Compatibilidad con el navegador: los navegadores que admiten totalmente la propiedad de tamaño de cuadro se enumeran a continuación:
- Google Chrome 10.0 4.0 -webkit-
- Internet Explorer 8.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 siddharthredhu01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA