La propiedad display en CSS es la más importante a la hora de definir cómo se ubicarán los elementos en tu página web. En este post, te enseñaremos cómo funciona esta propiedad y cómo usarla para controlar la estructura de tu sitio web.
¿Qué es la propiedad display en CSS?
La propiedad display en CSS nos ayuda a controlar dónde se va a ver un elemento HTML dentro de la pantalla para estructurar nuestra página web. Esta propiedad se basa en la lógica del modelo de caja en CSS. El modelo de caja en CSS dice que cada elemento HTML es realmente un bloque con una serie de características de borde, margen y padding. Cómo se ven estas características en nuestra página web dependerá de la opción de la propiedad display en CSS que elijamos para el elemento.
Inline vs. block
La propiedad display en CSS no solo determina dónde se va a situar un elemento, también define cómo se va a comportar a nivel de bloque o línea, e incluso si se va a ver o no. Para entender este comportamiento, primero debemos saber qué es el nivel de bloque y de línea.
Cada elemento de HTML tiene un valor display CSS por defecto. Los elementos de tipo div, encabezados, formularios, secciones o párrafos son elementos que tienen por defecto el valor block. Por otro lado, los elementos como span, cursiva, negrita, enlace e imagen tienen por defecto el valor inline. Estos valores afectarán a la forma en la que se comporta el elemento en relación al viewport y a la línea de texto.
Además de estos valores, la propiedad display en CSS tiene muchas opciones. A continuación, te presentamos las cuatro tipos de display CSS u opciones más importantes de esta propiedad.
Display CSS: block
El valor block en la propiedad display en CSS representa un elemento como un bloque y es uno de los tipos de display CSS. Una forma de entender esto es pensar en los bloques como elementos que van de lado a lado de la pantalla, como sería un párrafo. Cuando usamos este valor, el elemento empezará en una nueva línea al lado izquierdo de nuestro viewport y ocupará hacia la derecha, en el eje horizontal, tanto espacio como sea posible. Este bloque seguirá creciendo hacia abajo cuanto sea necesario y siempre intentará ocupar el ancho máximo de su contenedor, que en la mayoría de casos es el mismo viewport (espacio visible de la página web en pantalla).
Esto quiere decir que, si tienes, por ejemplo, un párrafo en una pantalla de 800 píxeles de ancho, el párrafo funcionará como un bloque y ocupará 800 píxeles de ancho. Puedes encontrar un pequeño margen entre el bloque y la pantalla, pero esto realmente es el margen del elemento body. Si le das un margen 0 a este elemento, los elementos de bloque ocuparán el total del ancho sin necesidad de especificar su tamaño.
Display CSS: inline
El valor inline en la propiedad display en CSS representa elementos que continúan en la misma línea que el resto del contenido y es otro de los tipos de display CSS. Los elementos inline pueden verse como una letra dentro de la propia línea del flujo del texto en vez de un bloque aparte. Estos elementos no respetan márgenes ni paddings top/bottom ni propiedades de width y height. Es decir, si les aplicas un relleno o margen, solo afectarán a los lados del elemento, no su espaciado arriba y abajo. Esto se vería como un gran espacio a la izquierda y derecha del texto que no afecta el alto de la línea, pues su prioridad es mantenerla.
Display: inline-block
Hay una opción que está en medio de los dos niveles de propiedad display en CSS anteriores. El inline-block se comporta igual que un elemento inline, ya que sigue el flujo de la línea del texto a la hora de situarse. Sin embargo, esta variedad se comporta como un elemento block, porque respeta las propiedades de width y height, así como los márgenes y paddings a cualquier lado del bloque.
Si quieres que un elemento esté en línea pero siga nuestros requerimientos de margen, relleno, alto y ancho, lo más fácil es cambiar el propiedad display en CSS del elemento a inline-block. A diferencia de los otros niveles, este no es un nivel por defecto, por lo que debes especificarlo en tu código.
Display: none
Esta opción de propiedad display en CSS oculta el elemento sin dejar espacio en el sitio que debería ocupar. Cuando agregues esta opción verás la página web sin ningún rastro del elemento. Esta opción permite crear estados en los que el elemento se oculte o se revele.
¿Y ahora qué?
Ahora que conoces qué es la propiedad display en CSS y cómo funciona, te invitamos a que sigas aprendiendo sobre el tema gracias a nuestro Desarrollo Web Full Stack Bootcamp. Allí, además de aprender cómo modificar los elementos HTML desde CSS, pondrás tus conocimientos en práctica al realizar tu propia página web. ¡Apúntate y transforma tu vida en poco tiempo!
