Propiedad box-sizing de CSS

Propiedad box-sizing de CSS

31 de diciembre 2020

Esta propiedad de CSS sirve para decidir cómo se va a calcular el ancho y alto de un elemento. Cuando usamos las propiedades width y height en un elemento, como un DIV por ejemplo, por defecto se aplican al área de contenido de la caja. Es decir, se excluye el padding y el border, lo que da como resultado que el ancho real del elemento sea la suma se esas medidas más el espaciado interno y el borde.

De entrada puede no parecer muy útil, pero hay ocasiones en las que nos puede interesar definir las dimensiones finales de un elemento con independencia de lo que haya en su interior. Cuando trabajamos con porcentajes para hacer una maquetación responsive es especialmente interesante, ya que podemos jugar con cómo se comportarán las cajas a diferentes resoluciones.

En el siguiente ejemplo he creado dos elementos, el primero tiene definido el tamaño, padding y un borde. El segundo tiene exactamente las mismas propiedades y además incluyo la de box-sizing.

.elemento-defecto{ 
  width: 500px;
  height: 300px;
  padding: 80px;  
  border: 5px solid #cccccc;
}

.elemento-propiedad{
  width: 500px;
  height: 300px;
  padding: 80px;  
  border: 5px solid #cccccc;
  box-sizing: border-box;
}

Siguiendo lo anterior, en el primer caso el ancho total del elemento sería de 670px, ya que comentaba antes a los 500px de width hay que sumarle 80px de padding-left y padding-right, así como 5px de border-right y border-left. En el segundo caso, al usar la propiedad box-sizing, el ancho total sería el mismo que definimos en la propiedad width, que son 500px.

Publicado por Jesús Tovar

Categorías: CSS, Diseño

Etiquetas: , ,

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *