Display: block e inline ejercicio

inline-block y cambiar display

En la lección anterior viste que los elementos inline ignoran width y height. ¿Y si necesitás que un elemento fluya en línea y acepte dimensiones? Ahí entra inline-block.

El híbrido: display: inline-block

inline-block combina lo mejor de los dos mundos:

Propiedadinlineblockinline-block
¿Fluye en línea?✅ Sí❌ No (apila)✅ Sí
¿Acepta width/height?❌ No✅ Sí✅ Sí
¿margin vertical desplaza el flujo?❌ No✅ Sí✅ Sí
/* botón de menú: fluye en línea, pero acepta dimensiones */
.btn {
  display: inline-block;
  width: 120px;
  padding: 8px 16px;
}
<a class="btn">Inicio</a>
<a class="btn">Menú</a>
<a class="btn">Contacto</a>
<!-- Los tres botones en la misma línea, cada uno con 120px de ancho -->

Casos de uso de inline-block

  1. Botones de navegación: <a> o <button> que necesitan dimensiones pero deben quedar en línea.
  2. Tags o etiquetas de categoría: <span class="etiqueta"> que necesita width y padding definido.
  3. Íconos con área clickeable uniforme: elementos inline que necesitan padding vertical real.

inline-block para layout en grilla — LEGACY: antes de Flexbox y Grid, se usaba inline-block para crear columnas. Hoy eso está reemplazado por Flexbox (CAT-25) y Grid (CAT-26). Usá inline-block para los casos arriba, no para layouts completos.

Cambiar display para reclasificar elementos

display es una propiedad normal de CSS: podés usarla en cualquier regla para cambiar el tipo de caja de un elemento.

/* hacer que <a> se comporte como block (botón de ancho completo) */
.btn-full {
  display: block;
  width: 100%;
}

/* hacer que <li> fluya en línea */
li {
  display: inline-block;
}

/* display: none — saca el elemento del flujo completamente */
.oculto {
  display: none;
}

display: none elimina el elemento del flujo y del espacio que ocupa. Es diferente de visibility: hidden, que lo hace invisible pero mantiene el espacio ocupado. La comparación fina va a la sección de Referencia.

display no cambia la semántica

Un <a> con display: block sigue siendo un hipervínculo para lectores de pantalla y motores de búsqueda. Un <li> con display: inline-block sigue siendo un ítem de lista. display cambia la caja visual, no lo que el elemento es semánticamente.

Tu turno: en el sandbox, convertí los .btn en inline-block y dales width: 140px. El check de width solo pasa si el elemento es inline-block — si olvidás el display, el ancho no se respeta y el segundo check también falla.

Nota sobre el motor: el check width = "140px" solo funciona cuando .btn tiene display: inline-block. Si el elemento fuera inline, getComputedStyle devolvería el ancho real del contenido en px (impredicible), no el valor declarado. Los dos checks se refuerzan mutuamente.

Barra de navegación con inline-block

Café Aroma quiere una barra de navegación horizontal con botones de ancho uniforme. Los `<a>` son **inline** por defecto: fluyen en línea pero ignoran `width`. `inline-block` es el híbrido: fluye en línea **y** acepta `width`/`height`. 1. **Convertí los `.btn` en `inline-block`:** escribí `.btn { display: inline-block; }`. Los botones van a seguir en la misma línea que antes. 2. **Dales un ancho uniforme de `140px`** con `.btn { width: 140px; }`. Ahora SÍ se respeta el `width` porque el elemento es `inline-block`. 3. **Agregá `padding: 8px 0` y `text-align: center`** para que el texto quede centrado dentro del botón. **Bonus (no validado):** probá cambiar `display: inline-block` por `display: inline` y fijate que `width: 140px` deja de funcionar. ¿Por qué? Porque inline ignora `width`.

Preview

En la referencia