Cómo usar la propiedad display en CSS

La propiedad display se usa para cambiar el tipo de un elemento. Hay elementos que por naturaleza son tipo bloque o en línea de manera que al usarlos y ajustar propiedades en CSS su posición no se ajusta lo que buscamos, es probable que haya que modificar esta propiedad. En este post hablaré de los valores más usados.

Block

Este valor hace que un elemento se muestre como un bloque. De no establecer un tamaño, automáticamente coge todo el espacio.

propiedad display block

Ejemplo display block

Inline

Permite mostrar en línea una serie de elementos. Siempre ocupa el tamaño necesario y no se puede modificar su tamaño.

propiedad display inline

Display inline

Inline-block

Es una mezcla de los 2 anteriores. Muestra los elementos en línea como inline pero se puede modificar su tamaño como un elemento block.

propiedad display block inline

Ejemplo display inline-block

None

Este valor indica que la caja no debe ser mostrada y no ocupará el espacio que tendría asignado. Esto afectará también a sus elementos hijos.

List-item

Hace que los que elementos se muestren como si fuera una lista. Además puede usar las mismas propiedades de una lista como list-style-type, list-style-image, list-style-position y list-style.

propiedad display list item

Display list-item

La propiedad display dispone a mayores otros valores como run-in, table-cell y sus derivados pero, suelen dar problemas en varios navegadores por lo cuál no los recomendaría.

Y hasta aquí el post de hoy, espero que os haya gustado. Buen finde 🙂