Display CSS

La propiedad display

Es la propiedad de CSS más importante para controlar estructuras.

Todos los elementos HTML tienen un valor de display predeterminado, dependiendo en el tipo de elemento.

La propiedad display nos permite determinar cómo se mostrará la caja, mostrar como oculta o mostrar.

Hay varios valores de la propiedad de display. Estaré cubriendo las siguientes partes en esta lección:

  • display: block;
  • display: inline;
  • display: none;

Block-level

Un elemento block-level comienza en una nueva línea y se estira hasta la derecha y izquierda tan lejos como pueda.

Lista de algunos elementos block-level:

Ejemplo
<div style="border: 1px solid orange;">Un div es un elemento block-level.</div>
Resultado:
Un <div> es un elemento block-level.

inline

Un elemento inline se utiliza para agrupar y aplicar estilos a elementos en línea.

Un elemento inline no comienza en una nueva línea y puede usarse, por ejemplo, dentro de una etiqueta de párrafo sin interrumpir el flujo.

Lista de algunos elementos inline:

Ejemplo
<p>Esto es un párrafo, <span style="color: red;border: 1px solid orange;">span es un elemento en línea</span></p>
Resultado:

Esto es un párrafo, span es un elemento inline


none

display: none;

elimina el elemento completamente del documento. No ocupa ningún espacio, a pesar de que el HTML para él todavía está en el código fuente

visibilty: hidden;

Se puede usar para ocultar elementos pero ocupará el espacio que necesita.