display y el flujo normal

El flujo normal

Por fin empiezas a colocar las cosas donde tú quieres. Pero antes de posicionar nada, conviene saber qué hace el navegador por su cuenta: coloca cada caja siguiendo el flujo normal, de arriba abajo y, dentro de una línea, de izquierda a derecha. La propiedad display decide cómo participa cada elemento en ese flujo. Domina esto y romper el flujo a propósito (lo verás luego) dejará de ser un misterio.

display: block

Un elemento de bloque ocupa todo el ancho disponible y empieza en una línea nueva, como un párrafo que reclama su renglón. Respeta width, height, y los cuatro lados de margin y padding. Son <div>, <p>, <h1>, <section>...

.bloque {
  display: block;
  width: 200px;
  height: 60px;
}

display: inline

Un elemento en línea fluye dentro del texto, uno tras otro y sin saltos de línea, como las palabras de una frase. Ignora width y height y solo aplica margin/padding horizontales de forma fiable. Son <span>, <a>, <strong>...

.enlinea {
  display: inline;
  /* width y height aquí NO tienen efecto */
}

display: inline-block

El punto medio, lo mejor de ambos mundos: el elemento fluye en línea (no salta de línea) pero sí respeta width, height y todos los márgenes/paddings. Perfecto para botones o etiquetas que necesitan tamaño propio sin dejar de convivir en una misma fila.

.etiqueta {
  display: inline-block;
  width: 80px;
  padding: 6px 10px;
}

display: none

display: none elimina el elemento del flujo: no se pinta y no ocupa espacio, como si nunca hubiera estado ahí. Cuidado, porque es distinto de visibility: hidden, que lo oculta pero reserva su hueco (deja el sitio vacío).

Regla práctica: block apila, inline fluye en el texto, inline-block fluye pero con tamaño, y none desaparece sin dejar rastro.

Ejemplos

Tres etiquetas en línea, pero con tamaño propio

<style>
.etiqueta {
  display: inline-block;
  width: 70px;
  padding: 6px;
  background: #ddd6fe;
  text-align: center;
}
</style>
<span class="etiqueta">Uno</span>
<span class="etiqueta">Dos</span>
<span class="etiqueta">Tres</span>