Editor

HTML organiza contenido en cajas

En una página web, casi todo se puede imaginar como una caja.

Un título es una caja:

<h1>Mundial 2026</h1>

Un párrafo es una caja:

<p>El Mundial se realizará en México, Estados Unidos y Canadá.</p>

Una imagen también ocupa una caja:

<img src="estadio.jpg" alt="Estadio">

CSS sirve para modificar esas cajas: cambiarles color, tamaño, margen, borde, fondo o posición.

1️⃣ ¿Qué es un <div>?

Un <div> es una etiqueta de HTML que sirve como contenedor.

Por sí solo, no significa “título”, “párrafo”, “imagen” o “botón”. Su función es agrupar contenido.

Ejemplo:

<div>
  <h2>Ciudad de México</h2>
  <p>Sede del Mundial 2026.</p>
</div>

Ese <div> está agrupando un título y un párrafo.

En la práctica, usamos <div> cuando queremos formar bloques como:

  1. Tarjetas
  2. Cajas
  3. Columnas
  4. Contenedores
  5. Secciones internas
  6. Bloques de información

2️⃣ Ejemplo simple de una tarjeta

Sin <div>, los elementos están separados:

<h2>Ciudad de México</h2>
<p>Sede del Mundial 2026.</p>

<h2>Guadalajara</h2>
<p>Sede del Mundial 2026.</p>

Con <div>, podemos agrupar cada sede:

<div>
  <h2>Ciudad de México</h2>
  <p>Sede del Mundial 2026.</p>
</div>

<div>
  <h2>Guadalajara</h2>
  <p>Sede del Mundial 2026.</p>
</div>

Ahora cada sede está dentro de su propia caja.

3️⃣ Modelo de caja

Todo elemento HTML se comporta como una caja.

Cada caja puede tener:

  1. Contenido
  2. Padding
  3. Border
  4. Margin

Visualmente:

Texto alternativo

Contenido

Es el texto, imagen o elemento que está dentro de la caja.

<p>Ciudad de México será sede del Mundial 2026.</p>
Padding
Es el espacio entre el contenido y el borde.
padding: 20px;

Sirve para que el texto no quede pegado al borde.

Border
Es la línea alrededor de la caja.
border: 1px solid black;
Margin
Es el espacio exterior entre una caja y otra.
margin: 10px;

Sirve para separar elementos.

4️⃣ Ejemplo completo

HTML

<div class="tarjeta">
  <h2>Ciudad de México</h2>
  <p>Sede del partido inaugural.</p>
</div>

CSS

.tarjeta {
  background-color: white; // Da color al fondo de la caja.
  border: 1px solid black; // Dibuja una línea alrededor.
  padding: 20px; // Separa el texto del borde.
  margin: 10px; // Separa esta tarjeta de otros elementos.
}

Cuando usamos propiedades como border, padding o margin, normalmente se aplican a los cuatro lados de la caja: arriba, derecha, abajo e izquierda. Sin embargo, también podemos modificar cada lado por separado usando propiedades específicas. Esto sirve cuando queremos ajustar solo una parte de la caja:

Texto alternativo