Html5

display. Aprenderemos sobre cuatro valores posibles.

block: esto vuelve al elemento una caja de bloque. ¡No permitirá que nada sea ubicado junto a él en la página! Ocupa el ancho completo.

inline-block: Esto vuelve a un elemento una caja de bloque, pero permitirá que otros elementos sean ubicados junto a él en la misma línea.

inline: Esto hace que un elemento sea ubicado en la misma línea que otro elemento, pero sin darle formato como bloque. Solamente ocupa el ancho que requiera (pero no la línea completa).

none: ¡Esto hace que el elemento y su contenido desaparezcan por completo de la página!

Observa el diagrama en la pestaña Resultado (es el mismo del primer ejercicio de esta lección). Como puedes ver, cada caja se compone de capas. Desde la que está más en el exterior hasta la que está más hacia el centro:

Margin (margen) es el espacio alrededor del elemento. Entre más grande, habrá más espacio entre nuestro elemento y los que lo rodean. Podemos ajustar el margen para mover nuestros elementos de HTML más cerca o más lejos unos de otros.

Border es el borde del elemento. Es lo que hemos estado haciendo visible cada vez que establecemos la propiedad border.

Padding (relleno) es el espacio entre el contenido y el borde. Con CSS, podemos ajustar este valor para mover el borde más cerca o más lejos del contenido.

Content es el contenido dentro de la caja. Si estamos hablando de un elemento <p>, el contenido es el texto del párrafo.

...