CSS 04: Modelo de Caja

El Modelo de Caja (Box Model)

Cada elemento HTML es esencialmente una caja rectangular. El modelo de caja de CSS describe las áreas rectangulares generadas para los elementos en el árbol del documento.

Desglose de las Partes:

• Content (Contenido): Donde aparece el texto y las imágenes. Su tamaño se define con width y height.
• Padding (Relleno): Área transparente alrededor del contenido. Aleja el borde del contenido.
• Border (Borde): Línea que rodea el padding y el contenido.
• Margin (Margen): Área transparente fuera del borde. Separa este elemento de sus vecinos.

Ejemplo de Código

div {

  width: 200px;        /* Ancho del contenido */

  height: 100px;       /* Alto del contenido */

  padding: 20px;       /* Espacio interno */

  border: 5px solid;   /* Grosor del borde */

  margin: 20px;        /* Espacio externo */

}

2. Tipos de Visualización (Display)

La propiedad display define cómo se comporta una caja en el flujo del documento.

• block: Ocupa todo el ancho disponible y empieza en una nueva línea (ej. div, p, h1).
• inline: Solo ocupa el ancho de su contenido y no empieza en nueva línea. Ignora width, height y márgenes verticales (ej. span, a).
• inline-block: Se comporta como inline (fluye con el texto) pero permite definir width, height y márgenes como un block.
• none: El elemento desaparece del flujo del documento.

3. Visibilidad y Ocultamiento

Es importante distinguir entre las diferentes formas de ocultar un elemento: