La propiedad display en CSS: cómo controlar la forma en que se muestran los elementos

Una guía completa para principiantes

La propiedad display es una de las propiedades más importantes de CSS. Se utiliza para controlar la forma en que se muestran los elementos en la página web.

La propiedad display puede tener los siguientes valores:

  • none: Oculta el elemento.
  • block: El elemento se muestra como una caja de ancho y alto completo.
  • inline: El elemento se muestra en línea, uno al lado del otro.
  • inline-block: El elemento se muestra en línea, pero puede tener un ancho y alto definidos.

Display none

El valor none oculta el elemento de la página web. El elemento no se mostrará, incluso si se establece su ancho y alto.

<div id="caja">
  <p>Este texto se mostrará.</p>
  <p id="oculto">Este texto se ocultará.</p>
</div>

En el ejemplo anterior, el texto del elemento con el ID "oculto" se ocultará.

Display block

El valor block hace que el elemento se muestre como una caja de ancho y alto completo. Los elementos de bloque suelen ocupar una línea completa de la página web.

<div id="caja">
  <p>Este texto se mostrará en una nueva línea.</p>
</div>

En el ejemplo anterior, el texto del elemento con el ID "caja" se mostrará en una nueva línea.

Display inline

El valor inline hace que el elemento se muestre en línea, uno al lado del otro. Los elementos en línea suelen ocupar el espacio que necesitan.

<div id="caja">
  <span>Este texto se mostrará en la misma línea.</span>
</div>

En el ejemplo anterior, el texto del elemento con el ID "caja" se mostrará en la misma línea.

Display inline-block

El valor inline-block combina las características de los elementos en línea y de bloque. Los elementos en línea-bloque suelen ocupar el espacio que necesitan, pero también pueden tener un ancho y alto definidos.

<div id="caja">
  <span id="bloque-inline">Este texto se mostrará en la misma línea, pero tendrá un ancho definido.</span>
</div>

En el ejemplo anterior, el texto del elemento con el ID "bloque-inline" se mostrará en la misma línea, pero tendrá un ancho definido de 100 píxeles.

Conclusiones

La propiedad display es una herramienta poderosa que se puede utilizar para controlar la forma en que se muestran los elementos en la página web. Al entender cómo funciona esta propiedad, podemos crear diseños web más flexibles y adaptables.

¿Buscas crear un sitio web profesional? No esperes más, en https://www.sitesupremacy.com tenemos el equipo de expertos que tu empresa necesita, contactanos y recibe hosting de por vida + un descuento especial de hasta el 25%.

José Mario Rivera Carranza 30 de enero de 2024
Compartir
Archivar
Cómo hacer layouts en HTML
Un tutorial básico para principiantes