Escrito por Laura Chuburu
El modelo de caja es la manera en que el navegador representa todas las etiquetas HTML que están dentro del body. Cada etiqueta genera una caja, el comportamiento de esa caja depende de su clasificación: si es de línea o de bloque. Ese comportamiento se puede modificar por CSS cambiando la propiedad display.
A todas las cajas se les puede aplicar las siguientes propiedades: width, height, padding, margin, border, background. Lo particular de este concepto es que por defecto el width y el height se refieren al ancho y alto del contenido de un elemento (no al ancho o alto total, de borde a borde).
En el gráfico muestro cómo se comporta cada una de las propiedades:
Width es el ancho del contenido.
Height es la altura del contenido.
Padding es la distancia desde el borde hacia el contenido.
Margin es la distancia desde el borde de un elemento hacia otro (por fuera de la caja).
Border los bordes de la caja, se puede definir grosor, color y estilo.
Background (imagen o color) ocupa todo el elemento desde los bordes.
Para aplicar estar propiedades a una etiqueta de línea es necesario cambiarle el display a block o inline-block por ejemplo para hacer un botón:
<a class="boton">botón</a>.boton {display: inline-block; background-color: black; color: white; height: 40px; line-height:40px; padding-left:20px; padding-right:20px}Para calcular el ancho total de un elemento es necesario sumar el ancho, más los dos padding (izquierda y derecha), más los bordes (izquierda y derecha). En cuanto a los valores verticales pasa lo mismo, pero en diseño web generalmente nos preocupa más definir los anchos de los elementos ya que las alturas están dadas en general por el contenido de cada elemento.
La propiedad box-sizing:border-box permite modificar ese comportamiento por defecto para poder calcular las medidas de las cajas independientemente del padding y el borde. Es común aplicar una regla general con selector universal para que se aplique a todos los elementos de esta forma:
* {box-sizing: border-box}Existen propiedades que definen el valor máximo o mínimo, éstas permiten mayor adaptabilidad a los cambios de pantallas.
Max-width: ancho máximo. El elemento no puede ser más ancho que el valor especificado pero sí puede achicarse.
Min-width: ancho mínimo. El elemento no puede ser más angosto que el valor especificado pero sí puede agrandarse.
Max-height: alto máximo. El elemento no puede ser más alto que el valor especificado pero sí puede achicarse.
Min-height: alto mínimo. El elemento no puede ser más bajo que el valor especificado pero sí puede agrandarse.
