¿Cuál es la diferencia entre display: inline y display: block en CSS?

Las propiedades display: block; y display: inline; en CSS son valores que definen cómo un elemento se renderiza en la página, cómo se comporta en el flujo del documento y cómo interactúa con los elementos circundantes, especialmente en lo referente a su dimensionamiento y espaciado.

display: block; (Elementos de bloque)

• Flujo y ocupación de espacio:
  • Siempre comienza en una nueva línea.
  • Por defecto, ocupa todo el ancho disponible de su elemento contenedor padre, extendiéndose horizontalmente lo máximo posible.
  • Los elementos de bloque subsiguientes también comenzarán en una nueva línea, apilándose verticalmente.
• Dimensiones (width y height):
  • Puedes establecer explícitamente las propiedades width y height para un elemento de bloque, y estas serán respetadas.
• Márgenes (margin) y rellenos (padding):
  • Se pueden aplicar margin (superior, derecho, inferior, izquierdo) y padding (superior, derecho, inferior, izquierdo) en todas las direcciones, y estos afectarán el espacio alrededor del elemento y el espaciado con otros elementos.
• Ejemplos de elementos que son block por defecto: <div>, <p>, <h1> a <h6>, <ul>, <ol>, <li>, <form>, <article>, <section>, <footer>, <header>, <nav>.

display: inline; (Elementos en línea)

• Flujo y ocupación de Espacio:
  • No comienza en una nueva línea. Se sitúa en la misma línea que el contenido adyacente (texto u otros elementos en línea), fluyendo con el texto.
  • Ocupa solo el ancho necesario para albergar su contenido. No se expande para llenar el ancho del contenedor padre.
  • Otros elementos en línea pueden situarse a su lado en la misma línea si hay espacio disponible.
• Dimensiones (width y height):
  • Las propiedades width y height no tienen efecto en los elementos inline. El ancho y alto están determinados por el contenido que albergan.
• Márgenes (margin) y Rellenos (padding):
  • Se pueden aplicar margin-left, margin-right, padding-left y padding-right (horizontales), y estos afectarán el espacio horizontal alrededor del elemento.
  • Las propiedades margin-top y margin-bottom (verticales) no tienen efecto en los elementos inline.
  • Las propiedades padding-top y padding-bottom (verticales) se aplican visualmente (el fondo y el borde se expandirán), pero no afectan al espaciado vertical entre las líneas de texto; es decir, el padding vertical puede superponerse visualmente con el contenido de las líneas adyacentes sin empujarlas.
• Ejemplos de elementos que son inline por defecto: <span>, <a> (enlaces), <img> (imágenes, aunque tienen un comportamiento intrínseco de dimensiones), <strong>, <em>, <button> (aunque su comportamiento puede ser más similar a inline-block en algunos aspectos), <input> (algunos tipos).

También existe display: inline-block;, que es un híbrido: el elemento fluye en la línea con otros elementos (como inline), pero puedes aplicarle width, height, y márgenes y paddings verticales que sí afectan al layout (como block).

La elección entre block e inline (o inline-block, flex, grid, etc.) depende de cómo necesites que el elemento se comporte estructural y visualmente dentro de tu diseño.