Tamaño de caja CSS

Cómo trabajar con el tamaño de caja en CSS

El comportamiento predeterminado de los navegadores al calcular el ancho de un elemento es aplicar el ancho y el alto calculados a laárea de contenido, sin tener en cuenta el relleno, el borde y el margen.

Este enfoque ha demostrado ser bastante complicado de trabajar.

Puede cambiar este comportamiento configurando elbox-sizingpropiedad.

losbox-sizingLa propiedad es de gran ayuda. Tiene 2 valores:

  • border-box
  • content-box

content-boxes el predeterminado, el que teníamos durante años antesbox-sizingse convirtió en una cosa.

border-boxes lo nuevo y grandioso que estamos buscando. Si establece eso en un elemento:

.my-div {
  box-sizing: border-box;
}

El cálculo de ancho y alto incluye el relleno y el borde. Solo se omite el margen, lo cual es razonable, ya que en nuestra mente también solemos ver eso como una cosa separada: el margen está fuera de la caja.

Esta propiedad es un pequeño cambio pero tiene un gran impacto. CSS Tricks incluso declaró undía internacional de concientización sobre el tamaño de las cajas, solo digo, y se recomienda aplicarlo a cada elemento de la página, listo para usar, con esto:

*, *:before, *:after {
  box-sizing: border-box;
}

Descarga mi gratisManual de CSS


Más tutoriales de CSS: