Apuntes sobre Css

¿Para qué quieres herencias cuando tienes !important?

Modelo de Caja en CSS

El navegador trata cada elemento HTML como una caja rectangular que ocupa espacio en la página. Esta caja comienza con el <body> y se extiende a todos los elementos que contenga. Las cajas pueden estar una a continuación de otra o anidadas dentro de otras, y cada una forma parte del flujo del documento.

Estas cajas se dividen en dos tipos principales:

  • Elementos de bloque: ocupan todo el ancho disponible y comienzan en una nueva línea (como <div>, <p>, <section>).
  • Elementos en línea: ocupan solo el espacio necesario y no interrumpen el flujo (como <span>, <a>, <strong>).

Cada caja tiene contenido, relleno, borde y márgenes, que puedes controlar con CSS para diseñar páginas precisas y visualmente atractivas. En esta lección exploraremos estos componentes y cómo afectan el diseño.

Partes de la caja

Todo elemento visual en HTML está compuesto por:

  • Contenido: el texto o imagen que contiene el elemento.
  • Padding: espacio entre el contenido y el borde.
  • Border: el borde visible del elemento.
  • Margin: espacio entre el borde y otros elementos.
div {
    margin: 10px;
    border: 2px solid black;
    padding: 10px;
}

Visualización del modelo de caja

+---------------------------+
|         Margin            |
|   +-------------------+   |
|   |      Border       |   |
|   |   +-----------+   |   |
|   |   |  Padding  |   |   |
|   |   | +-------+ |   |   |
|   |   | |Contenido|   |   |
|   |   | +-------+ |   |   |
|   |   +-----------+   |   |
|   +-------------------+   |
+---------------------------+

El inspector del navegador permite ver cada parte del modelo de caja con colores distintos (normalmente azul para contenido, verde para padding, amarillo para margin).

Consejo: Usa herramientas de desarrollador (F12 o clic derecho → Inspeccionar) para entender cómo se distribuye el espacio.

Propiedad box-sizing

Controla cómo se calcula el ancho y alto total de un elemento.

  • content-box (valor por defecto): el tamaño solo incluye el contenido. padding y border se suman aparte.
  • border-box: el tamaño incluye contenido, padding y borde.
div {
    width: 300px;
    padding: 20px;
    border: 5px solid black;
    box-sizing: border-box;
}

Recomendación: Usa box-sizing: border-box para simplificar el control del ancho total de los elementos.

Aplicación global de box-sizing

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

Esto asegura que todos los elementos respeten border-box, incluso pseudoelementos.

Propiedades del modelo de caja

Las propiedades margin, padding y border permiten controlar los espacios internos y externos de cualquier elemento. Cada una puede aplicarse de forma general o específica a cada lado: -top, -right, -bottom, -left.

Espaciado entre elementos

Padding y margin pueden definirse con una, dos, tres o cuatro unidades:

  • 1 valor → todos los lados
  • 2 valores → vertical | horizontal
  • 3 valores → arriba | horizontal | abajo
  • 4 valores → arriba | derecha | abajo | izquierda
p {
    margin: 1em 2em;
    padding: 0.5em 1em 0.5em 0;
}

Propiedad border

Define el borde de un elemento. Puedes controlar el grosor, estilo y color, o bien usar la forma abreviada:

div {
    border: 2px solid #333;
}

También puedes controlar cada lado por separado con border-top, border-right, etc.

Estilos disponibles: solid, dashed, dotted, double, groove, ridge, inset, outset, none.

Colapso de márgenes

Cuando dos márgenes verticales se encuentran (como entre párrafos), se combinan y no se suman.

<p style="margin-bottom: 1em">Uno</p>
<p style="margin-top: 2em">Dos</p>

El margen entre ambos será de 2em, no de 3em.

Altura mínima y máxima

Puedes usar min-height y max-height para evitar que los elementos se reduzcan o se expandan más de lo deseado.

div {
    min-height: 100px;
    max-height: 300px;
    overflow: auto;
}

Buenas prácticas

Valores universales: Puedes usar initial, inherit y unset con margin, padding, border y box-sizing.

  • initial: valor por defecto.
  • inherit: hereda del contenedor padre.
  • unset: aplica uno u otro según corresponda.

Diseño adaptable: Usa unidades relativas como em, rem o %.

Reseteo: Aplica box-sizing: border-box global para evitar cálculos complicados.

Compatibilidad: box-sizing y min/max-height tienen buen soporte, incluso en navegadores antiguos.

Pruebas: Usa el inspector para verificar márgenes, bordes y espaciado real en cada elemento.

TOP