Tema 12 · Maquetación

Elementos Block vs Inline

Comprende el flujo natural del documento web: cómo se comportan los elementos a nivel de bloque frente a los elementos en línea.

Tablas Semánticas y Fusión de Celdas Div, Span, Clases e Identificadores (ID)

El Flujo Normal del Documento Web

Cada elemento en HTML tiene un valor de visualización predeterminado según el tipo de contenido que representa. La gran mayoría se divide en dos categorías esenciales: elementos de bloque (block-level) y elementos en línea (inline).

Característica Elementos de Bloque (Block) Elementos en Línea (Inline)
Salto de línea Comienzan siempre en una línea nueva. Fluyen continuamente al lado del texto o elementos adyacentes sin saltar de línea.
Ancho (Width) Ocupan automáticamente todo el ancho disponible (100% del contenedor padre). Solo ocupan el ancho exacto y necesario de su contenido interno.
Márgenes y Relleno Respetan plenamente margin y padding en las 4 direcciones (arriba, abajo, izquierda, derecha). Respetan márgenes horizontales, pero los verticales (arriba/abajo) no empujan a las líneas vecinas.
Ejemplos comunes <div>, <p>, <h1>-<h6>, <section>, <ul>, <form> <span>, <a>, <strong>, <em>, <code>, <mark>

Regla de Oro de Anidamiento

Por estándar de HTML, los elementos de bloque pueden contener otros elementos de bloque y elementos en línea. Sin embargo, los elementos en línea nunca deben contener elementos de bloque. 

<!-- CORRECTO: Un bloque contiene elementos inline y otros bloques -->
<div class="caja">
  <p>Hola con un <span>texto destacado</span>.</p>
</div>

<!-- INCORRECTO: Un elemento inline nunca debe envolver un bloque -->
<span>
  <div>Error de sintaxis semántica</div>
</span>

⚡ Visualización de Cajas: Bloque vs Línea

Observa con bordes de color cómo el bloque se estira al 100% mientras el elemento inline solo abraza su texto:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Block vs Inline en Acción</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; line-height: 1.6; background: #fafafa; }
    
    /* Resaltar elementos de bloque en azul */
    .caja-bloque {
      background: #e0f2fe;
      border: 2px dashed #0284c7;
      padding: 12px;
      margin-bottom: 15px;
      border-radius: 6px;
    }

    /* Resaltar elementos inline en rosa */
    .texto-inline {
      background: #fce7f3;
      border: 2px solid #db2777;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: bold;
    }
  </style>
</head>
<body>

  <h2>Comparación Visual de Cajas</h2>

  <!-- Elemento de bloque: se expande a todo el ancho -->
  <div class="caja-bloque">
    <strong>Elemento de Bloque 1 (&lt;div&gt;):</strong> Ocupa toda la línea horizontal de izquierda a derecha.
  </div>

  <div class="caja-bloque">
    <strong>Elemento de Bloque 2 (&lt;p&gt;):</strong>
    Dentro de este párrafo tenemos varios elementos en línea:
    <span class="texto-inline">&lt;span&gt; en línea</span>, luego un 
    <a href="#" class="texto-inline">&lt;a&gt; enlace</a> y finalmente una palabra en 
    <strong class="texto-inline">&lt;strong&gt;</strong>.
    Todos conviven en el mismo renglón sin forzar saltos.
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de HTML5 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.