Tema 9 · Flujo y Display

Modos de Visualización (display)

Aprende cómo los elementos ocupan espacio en el flujo del documento con display: block, inline, inline-block, y las diferencias cruciales entre display: none y visibility: hidden.

Unidades Relativas, Absolutas y clamp() Posicionamiento (static, relative, absolute, fixed, sticky)

La Propiedad display

La propiedad display es la instrucción más importante para determinar el comportamiento estructural de un elemento dentro del flujo normal de renderizado de una página HTML.

Valor Comportamiento en Línea ¿Admite width / height? ¿Admite margin vertical? Ejemplos Nativos
block Ocupa todo el ancho disponible (salto de línea antes y después). Sí Sí <div>, <p>, <h1>, <section>
inline Fluye junto al texto. Solo ocupa el ancho de su contenido. No No <span>, <a>, <strong>, <em>
inline-block Fluye en línea con otros elementos, pero respeta dimensiones y márgenes. Sí Sí <button>, <input>, <img>

Cómo Ocultar Elementos: ¿display: none o visibility: hidden?

Existen dos formas fundamentales de hacer invisible un elemento en la pantalla, con un impacto radicalmente diferente en el layout:

  • display: none: Elimina el elemento del flujo visual por completo. Como si no existiera en el renderizado; los elementos contiguos ocupan su lugar.
  • visibility: hidden: Hace invisible el elemento, pero reserva su espacio intacto en blanco dentro de la página.
  • opacity: 0: Vuelve el elemento transparente, pero sigue ocupando espacio y sigue respondiendo a eventos de clic o puntero a menos que uses pointer-events: none.

⚡ Comparativa de Modos de Visualización y Ocultación

Observa cómo los elementos inline-block forman una barra horizontal respetando altos y anchos, y compara la ocultación entre display y visibility:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Propiedad Display en CSS</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f8fafc;
      padding: 25px;
      color: #0f172a;
    }

    /* Elementos en bloque */
    .caja-bloque {
      display: block;
      background-color: #dbeafe;
      border: 1px solid #93c5fd;
      color: #1e40af;
      padding: 10px;
      margin-bottom: 8px;
      border-radius: 6px;
    }

    /* Elementos inline-block */
    .caja-inline-block {
      display: inline-block;
      width: 140px;
      height: 70px;
      background-color: #fef3c7;
      border: 1px solid #fcd34d;
      color: #92400e;
      padding: 10px;
      margin-right: 10px;
      border-radius: 6px;
      vertical-align: top;
      text-align: center;
      font-weight: bold;
    }

    /* Botón para alternar visibilidad */
    .btn-control {
      background: #0284c7;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 6px;
      cursor: pointer;
      font-weight: 600;
      margin-bottom: 12px;
    }
  </style>
</head>
<body>

  <h3>1. Elementos en Bloque (display: block)</h3>
  <div class="caja-bloque">Bloque A: Ocupa todo el ancho horizontal disponible</div>
  <div class="caja-bloque">Bloque B: Automáticamente salta a la siguiente línea</div>

  <h3>2. Elementos en Línea-Bloque (display: inline-block)</h3>
  <div>
    <div class="caja-inline-block">Caja 1 (140x70px)</div>
    <div class="caja-inline-block">Caja 2 (140x70px)</div>
    <div id="cajaOcultable" class="caja-inline-block" style="background: #fee2e2; border-color: #fca5a5; color: #991b1b;">
      Caja 3 (Ocultable)
    </div>
  </div>

  <div style="margin-top: 20px;">
    <button class="btn-control" onclick="alternarDisplay()">
      Alternar con display: none
    </button>
    <button class="btn-control" style="background: #475569;" onclick="alternarVisibility()">
      Alternar con visibility: hidden
    </button>
  </div>

  <script>
    const caja = document.getElementById('cajaOcultable');
    function alternarDisplay() {
      caja.style.visibility = 'visible';
      caja.style.display = (caja.style.display === 'none') ? 'inline-block' : 'none';
    }
    function alternarVisibility() {
      caja.style.display = 'inline-block';
      caja.style.visibility = (caja.style.visibility === 'hidden') ? 'visible' : 'hidden';
    }
  </script>

</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 CSS3, Flexbox y Grid 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.