La propiedad de visualización de CSS

Cómo trabajar con eldisplaypropiedad en CSS

losdisplayLa propiedad de un objeto determina cómo lo representa el navegador.

Es una propiedad muy importante y probablemente la que tiene el mayor número de valores que puede usar.

Estos valores incluyen:

  • block
  • inline
  • none
  • contents
  • flow
  • flow-root
  • table(y todo eltable-*unos)
  • flex
  • grid
  • list-item
  • inline-block
  • inline-table
  • inline-flex
  • inline-grid
  • inline-list-item

además de otros que probablemente no usarás, comoruby.

Elegir cualquiera de ellos alterará considerablemente el comportamiento del navegador con el elemento y sus hijos.

En este artículo analizaré los más importantes que no se tratan en otro lugar:

  • block
  • inline
  • inline-block
  • none

Cubro a otros en publicaciones separadas:

inline

Inline es el valor de visualización predeterminado para cada elemento en CSS.

Todas las etiquetas HTML se muestran en línea fuera de la caja, excepto algunos elementos comodiv,pysection, que se establecen comoblockpor el agente de usuario (el navegador).

Los elementos en línea no tienen ningún margen ni relleno aplicado.

Lo mismo para alto y ancho.

lataagréguelos, pero la apariencia en la página no cambiará: el navegador los calcula y aplica automáticamente.

inline-block

Similar ainline, pero coninline-block widthyheightse aplican según lo especificado.

block

Como se mencionó, normalmente los elementos se muestran en línea, con la excepción de algunos elementos, incluidos

  • div
  • p
  • section
  • ul

que se establecen comoblockpor el navegador.

Condisplay: block, los elementos se apilan uno tras otro, verticalmente, y cada elemento ocupa el 100% de la página.

Los valores asignados a lawidthyheightlas propiedades se respetan, si las establece, junto conmarginypadding.

none

Usandodisplay: nonehace desaparecer un elemento. Todavía está en el HTML, pero no es visible en el navegador.

Descarga mi gratisManual de CSS


Más tutoriales de CSS: