31-Display en css

---

Propiedad display

• Elementos a nivel de bloque
• Elementos en línea
• Pantalla: ninguna
• Ocultar un elemento
• Tabla propiedades display

---

Elementos a nivel de bloque

Los elementos a nivel de bloque ocupan todo el ancho disponible y comienzan en una nueva línea, empujando los elementos siguientes hacia abajo. Algunos ejemplos comunes son las etiquetas <div>, <p>, <header> y <section>. Los elementos bloqueados son ideales para estructurar el contenido y separar secciones.

Ejemplo de código de un elemento a nivel de bloque:

<div style="background-color: lightblue; padding: 20px; margin-bottom: 10px;">
    <h2>Sección 1</h2>
    <p>Este es un bloque de contenido que ocupa todo el ancho de la pantalla.</p>
</div>

<div style="background-color: lightcoral; padding: 20px;">
    <h2>Sección 2</h2>
    <p>Otro bloque que aparece debajo del primero, también ocupa todo el ancho disponible.</p>
</div>

            

---

Ejemplo Visual: Elementos a Nivel de Bloque

En este ejemplo, los elementos bloqueados están estructurados uno debajo del otro. Observa cómo se separan las secciones, ocupando todo el ancho disponible.

Sección 1

Este es un bloque de contenido que ocupa todo el ancho de la pantalla.

Sección 2

Otro bloque que aparece debajo del primero, también ocupa todo el ancho disponible.

---

...

Elementos en línea

Los elementos en línea no comienzan en una nueva línea y solo ocupan el espacio necesario para su contenido. Algunos ejemplos de estos elementos son <span>, <a> y <strong>. Se utilizan generalmente para aplicar estilos a porciones específicas del contenido sin afectar el flujo del diseño general.

Ejemplo de código de un elemento en línea:

<p>
    Este es un texto normal con un <span style="color: red;">resaltado en rojo</span> y un <a href="#">enlace</a> en línea.
</p>

            

---

Ejemplo Visual: Elementos en Línea

En este ejemplo, los elementos en línea no interrumpen el flujo del texto. El <span> y el <a> se encuentran en la misma línea que el texto, sin afectar el flujo general del contenido.

Este es un texto normal con un resaltado en rojo y un enlace en línea en el mismo párrafo. Observa que no comienza una nueva línea para estos elementos.

---

Pantalla: ninguna

La propiedad display: none; permite ocultar un elemento de la página. Este elemento ya no ocupa espacio en el flujo del documento, y no es visible ni interactuable. Esto es útil cuando se desea ocultar elementos sin eliminarlos del DOM.

Ejemplo de código de un elemento con display: none;:

<div style="background-color: lightblue; padding: 20px;">
    <h2>Sección Visible</h2>
    <p>Este bloque está visible en la página.</p>
</div>

<div style="display: none; background-color: lightcoral; padding: 20px;">
    <h2>Sección Oculta</h2>
    <p>Este bloque está oculto y no ocupa espacio en la página.</p>
</div>

            

---

Ejemplo Visual: Pantalla Ninguna

Este es un ejemplo de cómo un bloque con display: none; no se muestra ni ocupa espacio en la página.

Sección Visible

Este bloque está visible en la página.

Sección Oculta

Este bloque está oculto y no ocupa espacio en la página.

---

Tabla Propiedades Display

A continuación, se presenta una tabla con las principales propiedades de display y sus efectos:

Propiedad	Descripción
block	El elemento se comporta como un bloque, ocupando todo el ancho disponible.
inline	El elemento se comporta como un elemento en línea, ocupando solo el espacio necesario.
none	El elemento se oculta completamente, no ocupa espacio ni es visible.
flex	El elemento se convierte en un contenedor flexible, permitiendo alinear sus elementos internos.

---

Ir al índice

---

---