¿Qué es inline-block en CSS?

inline-block — es un valor de la propiedad display en CSS que permite a los elementos comportarse como elementos en línea (ocupar solo el ancho necesario y no comenzar en una nueva línea), pero al mismo tiempo tener la capacidad de definir ancho, altura, márgenes (margin, padding) desde cualquier lado, como los elementos de bloque.

Características principales:

• Ubicación en línea: Los elementos con display: inline-block se colocan uno tras otro en una misma línea, si hay suficiente espacio.
• Consideración de tamaños: Se pueden definir width y height. El contenido determina el tamaño por defecto si no se especifican.
• Márgenes y bordes completos: Se aplican margin, padding y border desde todos los lados (arriba, derecha, abajo, izquierda), a diferencia de los elementos en línea (inline), donde los márgenes y bordes verticales no afectan la disposición de los elementos vecinos.
• Alineación vertical: Se puede usar la propiedad vertical-align para alinear respecto a los elementos vecinos en la línea.

Ejemplo de uso:

/* Los elementos se colocarán en línea, con tamaños y márgenes definidos */
.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid black;
}

Campo de aplicación:

• Creación de menús de navegación horizontales.
• Colocación de bloques de contenido en forma de tarjetas en una misma línea.
• Combinación y alineación de elementos que deben estar juntos, pero tener tamaños específicos.

Comparación con otros valores de display:

display	Descripción	Considera tamaños (width/height)	Considera márgenes verticales (margin-top/bottom)	Disposición en línea
block	Siempre comienza en una nueva línea, ocupa todo el ancho disponible.	Sí	Sí	No
inline	Se coloca en línea con el texto, ocupa solo el ancho necesario.	No	No (margin-left/right sí afectan)	Sí
inline-block	Se coloca en línea, pero se comporta como bloque en tamaño y márgenes.	Sí	Sí	Sí