En el diseño web, cada elemento HTML se interpreta como una caja rectangular por parte del navegador durante el proceso de renderizado.

Componentes del Modelo de Cajas

Una caja CSS se compone de cuatro áreas principales:

• Área de contenido (content)
• Área de relleno (padding)
• Área de borde (border)
• Área de margen (margin)

Dimensiones del Área de Contenido

/*
Las propiedades width y height definen las dimensiones del área de contenido
Si no se especifican, el navegador determina el tamaño automáticamente
Valores: número + px
*/

Uso de Bordes

/*
Propiedad: border
Valores: múltiples valores separados por espacio
Ejemplo: border: 5px solid blue;
Atajo: border + tab
*/

Bordes en Direcciones Específicas

/*
Para establecer bordes en una dirección específica:
Propiedad: border-[dirección]
Direcciones: left, right, top, bottom
Ejemplo: border-left: 3px dashed red;
*/

Propiedades de Bordes Individuales

Relleno (Padding)

El padding se aplica en sentido horario: superior, derecho, inferior, izquierdo.

<style>
  .contenedor {
    width: 300px;
    height: 300px; 
    background-color: #f8d7da;
    padding: 30px;
    /*
    El padding puede tener múltiples valores:
    4 valores: padding: 10px 20px 30px 40px; (arriba, derecha, abajo, izquierda)
    3 valores: padding: 10px 40px 80px; (arriba, lados, abajo)
    2 valores: padding: 10px 80px; (vertical, horizontal)
    1 valor: padding: 20px; (todos los lados)
    */
  }
</style>

Modelo de Caja con Borde Incluido (Box-sizing)

Tanto el border como el padding aumentan el tamaño total de la caja. Para evitar esto, podemos usar:

/*
Solución manual: calcular y restar manualmente el espacio extra

Solución automática:
Propiedad: box-sizing: border-box
El navegador calcula automáticamente el espacio extra y lo resta del contenido
*/

Margen (Margin)

Las propiedades del margen funcionan de manera similar al padding, pero no aumentan el tamaño de la caja.

Eliminación de Estilos por Defecto

Los navegadores aplican márgenes y rellenos por defecto a algunas etiquetas. Es recomendable resetear estos valores al inicio de un proyecto.

<style>
  * {
    margin: 0;
    padding: 0;
  }
</style>

Por ejemplo:

• La etiqueta body tiene margin: 8px por defecto
• La etiqueta p tiene márgenes superior e inferior
• La etiqueta ul tiene márgenes superior e inferior y padding izquierdo

Centrado del Contenido Principal

El centrado del contenido principal (generalmente horizontal) se logra con margin: 0 auto.

Fusión de Márgenes Verticales

Al colocar elementos de bloque en vertical, los márgenes superior e inferior se fusionan, quedando el espacio resultante como el valor máximo de los dos.

    <style>
        .caja-grande {
            margin-bottom: 60px;
            width: 300px;
            height: 300px;
            background-color: #f8d7da;
        }

        .caja-pequena {
            margin-top: 40px;
            width: 100px;
            height: 100px;
            background-color: #d1ecf1;
        }
    </style>


    <div class="caja-grande"></div>
    <div class="caja-pequena"></div>

Solución: aplicar margen solo a uno de los elementos.

Collapse de Márgenes (Colapso)

Ocurre cuando un elemento hijo con margen afecta la posición de su elemento padre.

    <style>
        .padre {
            width: 300px;
            height: 300px;
            background-color: #f8d7da;
        }

        .hijo {
            width: 100px;
            height: 100px;
            background-color: #d1ecf1;
            margin-top: 50px;
        }
    </style>


    <div class="padre">
        <div class="hijo"></div>
    </div>

Soluciones:

1. Aplicar overflow: hidden al elemento padre
2. Convertir el elemento en un elemento en línea (display: inline-block)
3. Usar posicionamiento flotante (float)

Elementos en Línea y Márgenes Verticales

Los márgenes y rellenos verticales no tienen efecto en elementos en línea; solo afectan al espacio horizontal.

Flujo Estándar de Etiquetas

Es el comportamiento predeterminado de cómo se disponen los elementos en la página:

• Elementos de bloque: se disponen de arriba a abajo, cada uno ocupa una línea completa
• Elementos en línea o en línea-bloque: se disponen de izquierda a derecha, y cuando no hay espacio suficiente, pasan a la siguiente línea