la propiedad "display"

display es la propiedad más importante para controlar estructuras. Cada elemento tiene un valor de display por defecto dependiendo de qué tipo de elemento sea. El valor por defecto para la mayoría de los elementos es usualmente block (de bloque) o inline (en línea). Un elemento que es block es comunmente llamado elemento block-level. Un elemento inline siempre es llamado elemento inline.

block

<div>

El div es el elemento block-level estándar. Un elemento block-level comienza en una nueva línea y se estira hasta la derecha e izquierda tan lejos como pueda. Otros elementos block-level muy comunes son p y form, y algunos nuevos en HTML5 son header, footer y section.

</div>

inline

El span es el elemento inline estándar. Un elemento inline puede contener algo de texto dentro de un párrafo <span> como esto </span> sin interrumpir el flujo del párrafo. El elemento a es el elemento inline más común, ya que se usa para links.

none

Otro valor común de display es none. Algunos elementos especializados como script usan este por defecto. Es comúnmente usado en JavaScript para ocultar o mostrar elementos sin eliminarlos ni recrearlos.

Esto es diferente de visibility. Usar display: none no dejará espacio donde el elemento se encontraba, pero visibility: hidden; dejará un espacio vacío.

You found me!

otros valores de display

Hay bastantes valores exóticos de display, como list-item y table. Aquí hay una lista exhaustiva. Discutiremos inline-block y flex después.

crédito extra

Como mencioné, cada elemento tiene un valor de display por defecto. Sin embargo, ¡siempre puedes sobreescribirlos! Aunque no tendría sentido que un div fuera inline, puedes usar esto para personalizar la valor de display que tienen ciertos elementos con semántica particular. Un ejemplo muy común es cuando hacemos que un elemento li sea inline para menús horizontales.

  • Creative Commons License