Propiedad display en CSS

Autor: | Última modificación: 8 de junio de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post: ,

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. En resumen, 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 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 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 variedades u opciones más importantes de esta propiedad.

Display: block

El valor block en la propiedad display en CSS representa un elemento como un bloque. 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 pixeles de ancho, el párrafo funcionará como un bloque y ocupará 800 pixeles 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: 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. 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 ni 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 display 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 display 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 display 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 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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!