Block vs Inline: La base del CSS

 

Block vs Inline: La base del CSS

Son los dos tipos de visualización fundamentales en CSS. Todo elemento HTML tiene uno de estos comportamientos por defecto.

---

📦 ELEMENTOS BLOCK (Bloque)

Características principales:

• Ocupan todo el ancho disponible de su contenedor

• Empiezan en una nueva línea (saltan hacia abajo)

• Respetan width, height, margin, padding

• Se apilan verticalmente

Ejemplos comunes:

html

<div>Block</div>
<p>Párrafo</p>
<h1>Heading</h1>
<section>Sección</section>
<footer>Pie</footer>
<form>Formulario</form>

Comportamiento visual:

css

/* Cada caja ocupa todo el ancho y se apila */
[==============]  ← div
[==============]  ← p
[==============]  ← h1

---

📄 ELEMENTOS INLINE (En línea)

Características principales:

• Ocupan solo el espacio necesario de su contenido

• NO empiezan en nueva línea (fluyen como texto)

• NO respetan width, height (ignoran estos valores)

• Respetan margin horizontal, pero NO vertical (arriba/abajo)

• Se colocan horizontalmente

Ejemplos comunes:

html

<span>Inline</span>
<a>Enlace</a>
<strong>Negrita</strong>
<img> (caso especial - inline pero con width/height)
<button> (caso especial)

Comportamiento visual:

css

/* Fluyen como texto en línea horizontal */
[uno] [dos] [tres]  ← todos en la misma línea

---

🎯 DIFERENCIAS CLAVE (Ejemplo Visual)

html

<div>Bloque 1</div>
<div>Bloque 2</div>
<span>Inline 1</span>
<span>Inline 2</span>
<span>Inline 3</span>
<div>Bloque 3</div>

Resultado:

text

Bloque 1 (ocupa todo el ancho)
Bloque 2 (ocupa todo el ancho)
Inline 1 Inline 2 Inline 3 (todos en la misma línea)
Bloque 3 (ocupa todo el ancho)

---

🔄 COMPARACIÓN DIRECTA

Propiedad	BLOCK	INLINE
Ocupa ancho	Todo el disponible	Solo el necesario
Salto de línea	Sí (nueva línea)	No (misma línea)
Respetan width/height	✅ Sí	❌ No
Margin vertical	✅ Sí	❌ No
Padding vertical	✅ Sí	⚠️ Visual sí, pero no afecta flujo
Se apilan	Verticalmente	Horizontalmente
Ejemplo	<div>, <p>	<span>, <a>

---

🔧 INLINE-BLOCK (El híbrido útil)

Existe un tercer valor: inline-block que combina lo mejor de ambos:

css

.elemento {
    display: inline-block;
}

Características:

• ✅ Se colocan horizontalmente (como inline)

• ✅ Respetan width y height (como block)

• ✅ Respetan margin y padding en todas direcciones

Ejemplo práctico:

css

.boton {
    display: inline-block;
    width: 120px;      /* Funciona */
    padding: 10px;      /* Funciona */
    margin: 5px;        /* Funciona en todas direcciones */
}

html

<button class="boton">Uno</button>
<button class="boton">Dos</button>
<button class="boton">Tres</button>

Resultado: Botones en línea, con tamaño controlado.

---

📝 EJEMPLO PRÁCTICO CON TU TARJETA

html

<!-- BLOCK por defecto -->
<div>Este div ocupa todo el ancho</div>
<p>Este párrafo también</p>

<!-- INLINE por defecto -->
<a href="#">Enlace 1</a>
<a href="#">Enlace 2</a>
<span>Esto está en la misma línea</span>

<!-- Mezcla con inline-block -->
<button>Botón 1</button>
<button>Botón 2</button>
<button>Botón 3</button>

---

🎨 VISUALIZACIÓN GRÁFICA

text

BLOCK:
┌────────────────────┐
│                    │
└────────────────────┘
┌────────────────────┐
│                    │
└────────────────────┘

INLINE:
┌────┐ ┌────┐ ┌────┐
│    │ │    │ │    │
└────┘ └────┘ └────┘

INLINE-BLOCK:
┌──────┐ ┌──────┐ ┌──────┐
│      │ │      │ │      │
│ w/h  │ │ w/h  │ │ w/h  │
│      │ │      │ │      │
└──────┘ └──────┘ └──────┘

---

💡 REGLA DE ORO

Si quieres que algo ocupe toda la línea y se apile verticalmente → BLOCK
Si quieres que algo fluya como texto horizontalmente → INLINE
Si quieres controlar tamaño pero mantener en línea → INLINE-BLOCK

---

🔍 ¿Cómo verlo en tu código?

En tu tarjeta actual:

• .card es block (div)

• .card-header también es block (div)

• <h2> es block por defecto

• <p> es block por defecto

• <button> es inline-block por defecto (por eso respeta padding pero no ocupa todo el ancho)