[Duda] Porque uso display: inline;

¡Hola Jose!

La propiedad display en CSS determina cómo se muestra un elemento en la página. Cuando se utiliza display: inline;, el elemento se comporta como una parte de texto y se muestra en la misma línea que el contenido que lo rodea. Por otro lado, cuando se utiliza display: inline-block;, el elemento se muestra en línea, pero también se le permite tener dimensiones y aplicar márgenes y rellenos.

La diferencia principal entre display: inline; y display: inline-block; radica en cómo se comportan los elementos en relación con otros elementos en la página.

Por ejemplo, si tienes una lista de elementos <li> dentro de un elemento <ul>, si les aplicas display: inline;, los elementos de la lista se mostrarán uno al lado del otro en una sola línea. Pero si les aplicas display: inline-block;, los elementos de la lista se mostrarán en línea, pero también podrás aplicarles estilos de dimensiones, como ancho y alto, y márgenes y rellenos.

Aquí tienes un ejemplo práctico:

<ul>
  <li style="display: inline;">Elemento 1</li>
  <li style="display: inline;">Elemento 2</li>
  <li style="display: inline;">Elemento 3</li>
</ul>

<ul>
  <li style="display: inline-block;">Elemento 1</li>
  <li style="display: inline-block;">Elemento 2</li>
  <li style="display: inline-block;">Elemento 3</li>
</ul>

En el primer caso, los elementos de la lista se mostrarán uno al lado del otro sin poder aplicarles estilos de dimensiones. En el segundo caso, los elementos de la lista se mostrarán uno al lado del otro y podrás aplicarles estilos de dimensiones.

Espero que esto aclare tu duda. ¡Buenos estudios!