Diferencias entre display block, inline & inline-block

El CSS es uno de los pilares del diseño web, ya que va a ser el responsable de vestir la estructura generada por nuestro HTML, va a ser la parte visual de nuestras páginas webs. Para utilizar CSS de manera eficaz, es esencial comprender la propiedad display ✨.

La propiedad display determina como varios elementos se mostrarán en una página. Y dentro de esta propiedad tenemos varios valores, que a veces llegan a causar cierta confusión, sobre todo en gente que acaba de entrar en el mundo del front-end: block, inline, inline-block.

En esta entrada vamos a ver las diferencias entre display block, inline e inline-block

Display block

Un elemento con display block, empezará siempre en una nueva línea y por defecto va a ocupar el ancho completo (el 100%) de su padre. Si escribimos varios elementos tipo block  se irán apilando uno encima de otro.

Los elementos de tipo bloques son versátiles en cuanto a que aceptan paddings y margins con lo cual tenemos control sobre el espacio que ocupan.

Algunos elementos que traen son de tipo block por defecto: div, p, h1-h6, nav, ul, figure.

Display inline

Por otro lado, un elemento inline es literalmente una línea. No va a pasar a la línea siguiente, empezará justo después del elemento anterior y el contenido que ocupa a lo ancho viene dado por su propio contenido, no puedes aplicar ancho o alto (width / height) y ni los margins ni los paddings se comportarán como esperamos, se podrá aplicar, pero siempre será mejor práctica darlos en los elementos inline-block que veremos a continuación.

Algunos elementos que traen son de tipo inline por defecto: span, a, img, input, strong, br.

Inline-block: Lo mejor de ambos mundos

Pero ¿qué pasa si queremos tener un elemento inline, al que nos gustaría darle paddings y margins y además definir su ancho y largo?🪄 Aquí es donde entra inline-block. Combina aspectos tanto de inline como de block como el propio nombre indica.

Inline-block puede ser especialmente útil para ubicar elementos button en la misma línea. O para añadirle un pseudo elemento a un elemento tipo párrafo o encabezado.

Si todavía no te ha quedado claro, te dejamos este pequeño ejemplo para que trastees:

See the Pen Untitled by David Boo (@David-Boo) on CodePen.

Conclusión

En resumen, la propiedad display es una herramienta fundamental en CSS para controlar la visualización y disposición de los elementos en una página web. Te animamos a experimentar con diferentes valores de display para ver cómo afectan a la visualización de tus elementos.

Con un poco de práctica, podrás dominarlos y crear diseños web increíbles.