Curso de CSS / display: block, inline, inline-block y ocultación

La propiedad display determina cómo un elemento genera cajas y participa en el diseño. block, inline e inline-block se comportan de manera diferente en el flujo normal; display: none elimina la caja, mientras que visibility: hidden deja su espacio en el diseño.

Compara block, inline e inline-block

div·p generalmente se muestra como un bloque, y span·a generalmente se muestra en línea. Si no le das a un bloque un ancho separado, usualmente llenará el ancho disponible de su elemento padre. En línea se coloca dentro de una línea como letras en una oración, permitiendo que contenido largo se divida en varias líneas. Un inline-block se trata como una sola caja colocada dentro de una línea, por lo que incluso si el contenido dentro de la caja se envuelve, la caja en sí no se divide en múltiples partes como un en línea regular.

.item { width: 120px; height: 48px; padding: 8px; margin: 8px; }
.blocks .item { display: block; }
.inlines .item { display: inline; }
.inline-blocks .item { display: inline-block; }

Todo el ejemplo da el mismo tamaño y margen a los mismos tres spans y solo cambia la visualización. block escribe una nueva línea para cada elemento, mientras que inline-block los coloca en la misma línea si hay espacio. La declaración de width·height de inline no hace que el tamaño real de la caja del span de texto plano sea ese número, incluso si permanece en la lista de estilos. Verifica la declaración calculada y el tamaño realmente usado por separado.

Comprende el espaciado inline y los elementos reemplazados

En el modo inline regular, los márgenes y el padding izquierdo y derecho afectan el espacio dentro de la línea. El padding y los bordes superior e inferior pueden dibujarse, pero no determinan la altura de la línea al empujar las líneas circundantes como los bloques. Si das un padding vertical grande a un texto de varias líneas, puede aparecer superpuesto. A lo largo del ejemplo, observamos la visualización permitiendo cierta flexibilidad en la altura de la línea.

No apliques “los elementos inline no pueden tener tamaño” a todos los elementos. Los elementos reemplazados, como img, muestran contenido externo y pueden usar ancho y alto incluso cuando su display por defecto es inline. El rectángulo azul en el ejemplo mide 120 × 60px. Trátalo de manera diferente a un span de texto ordinario. La guía MDN sobre el diseño en bloque e inline explica el flujo subyacente.

Compara display: none y visibility: hidden

DOM (Document Object Model, modelo de objetos del documento) es un modelo en el que los navegadores tratan los documentos HTML como una estructura de elementos. Ocultar con CSS es diferente de eliminar un elemento HTML. Los párrafos con display: none también se pueden encontrar en Elements en las herramientas de desarrollador. En la línea “frente, objetivo, atrás” de todo el ejemplo, hidden deja un espacio en blanco en la posición objetivo, y none significa que las letras detrás de él se adelantan.

Ocultar un elemento puede cambiar el acceso por teclado y su disponibilidad para la tecnología asistiva, así como su apariencia. Este ejercicio compara el espacio de las cajas en un documento estático. Un descendiente de un elemento con visibility: hidden puede volver a verse si declara visibility: visible; display: none suprime las cajas de todo ese subárbol. Para menús y controles reales, comprueba también la gestión del foco y si la información necesaria sigue estando disponible. Vea MDN: display, MDN: visibility.

Alinea cajas inline-block dentro del flujo normal

Debido a que inline-block está dentro de una línea de texto, se alinea a la línea base de la línea por defecto. Si ves espacio vacío debajo de un elemento o los elementos con diferentes alturas están desalineados, revisa vertical-align y line-height juntos. Incluso los espacios en blanco o saltos de línea entre elementos en HTML pueden ser huecos visibles en la colocación en línea.

Incluso si cambias la apariencia con display, el span no tiene un significado de título ni el div funciona como un botón. Elige el HTML que se ajuste a tu significado y establece su colocación. Si necesitas gestionar la alineación, el espaciado y el tamaño de varias cajas juntas, las reglas que aprenderás más adelante en Flexbox·Grid pueden ser más apropiadas. Una vez que entiendas el flujo básico, se vuelve más fácil determinar qué cambia en la disposición. Cómo colocar elementos a lo largo de un eje se cubre en un ejemplo completo en Fundamentos de Flexbox: Contenedores, Elementos y Ejes. Cómo diseñar filas y columnas juntas se cubre con un ejemplo completo en Fundamentos de CSS Grid: Pistas, Líneas y Colocación de Elementos.

Ejecuta el ejemplo y cambia un valor a la vez

Guarda el código siguiente como UTF-8 en display.html y ábrelo. Los ejemplos de imágenes contienen datos SVG que se pueden ejecutar sin un archivo. Compara tres métodos de colocación y tres situaciones de visibilidad en el mismo documento.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparison of display and hiding</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .example { margin-block: 24px; padding: 8px; border: 1px dashed #777; }
    .item { width: 120px; height: 48px; padding: 8px; margin: 8px;
      border: 1px solid #a8653e; background: #ffe8dd; }
    .blocks .item { display: block; }
    .inlines { line-height: 3; }
    .inlines .item { display: inline; }
    .inline-blocks .item { display: inline-block; }
    .visibility-row { margin-block: 16px; padding: 8px; border: 1px solid #aaa; }
    .target { display: inline-block; width: 120px; height: 48px; background: #d9eee2; }
    .none .target { display: none; }
    .hidden .target { visibility: hidden; }
    .replaced { width: 120px; height: 60px; vertical-align: middle; }
  </style>
</head>
<body>
  <h1>Comparing block and inline elements</h1>
  <h2>block</h2><div class="example blocks"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>inline</h2><div class="example inlines"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>inline-block</h2><div class="example inline-blocks"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>Comparing visible, hidden, and removed boxes</h2>
  <div class="visibility-row">Front <span class="target">Visible target</span> Back</div>
  <div class="visibility-row hidden">Front <span class="target">Hidden target</span> Back</div>
  <div class="visibility-row none">Front <span class="target">Target with no box</span> Back</div>
  <h2>An image as an inline replaced element</h2>
  <p>Front <img class="replaced" alt="A blue rectangle 120px wide and 60px tall." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Crect width='48' height='24' fill='%237ebad3'/%3E%3C/svg%3E"> Back</p>
</body>
</html>

1. En las Herramientas de Desarrollo, verifica el tamaño de los elementos block e inline-block hasta sus bordes. Es 120×48px debido a la regla común de border-box. Los elementos inline no están fijos a un ancho de 120px aunque tengan la misma declaración de ancho.
2. Reduce el ancho de la ventana para ver si el tercer elemento en el inline-block se ajusta a la siguiente línea. Cada bloque comienza en una nueva línea, incluso en pantallas anchas.
3. Desactiva la declaración display: none de la regla .none .target. Verifica si la posición de las letras detrás de esto cambia a medida que aparece el objetivo. Si apagas la declaración de visibilidad hidden, el objeto aparecerá, pero se mantendrá el espacio originalmente reservado.
4. Cambia solo el ancho de la imagen a 160px. A diferencia de un span en línea normal, comprueba si cambia de tamaño y vuelve a 120px. Si mantienes la altura fija en 60px y solo cambias el ancho, la proporción original cambiará.

Si la colocación es diferente de lo esperado, verifica el valor final de display, el método de colocación del padre, el tamaño de la caja y la altura de línea. En lugar de agregar repetidamente declaraciones de tamaño que no se aplican, es útil primero distinguir entre tipos de elementos y flujos básicos.