Entender la propiedad display
La propiedad display nos permite definir como será mostrado un cierto elemento HTML.
display : block
El elemento es mostrado como un elemento block, o sea como los párrafos o encabezados siempre fueron mostrados.
Un elemento block siempre tiene algo de espacio por encima y debajo, que lo separa de los demás elementos,
y no acepta ningún otro elemento a su lado - si no está indicado de otra manera (float).
CONSEJO:
En los siguientes ejemplos, cambiando la opción de los <select> cambia también el valor de la propiedad display.
display : inline
El elemento aparece en línea por ejemplo dentro de un elemento block.
Ejemplos de elementos definidos como inline: <span>, <em>, <strong>, etc...
Cuando un elemento inline se encuentra entre dos elementos block, el elemento inline se comporta como un block anónimo, de mínima anchura
(por ejemplo la anchura del texto dentro de este elemento.)
display : none
Se utiliza para ocultar un elemento. Tampoco será visible en el siguiente ejemplo (<div id="b3g1a2">).
display : inline-block
El elemento aparece en línea pero se comporta como un elemento block.
Un elemento inline-block resulta muy útil cuando queremos dar una anchura al elemento.
En el siguiente ejemplo la anchura del elemento inline-block es de 150px.
display : list-item
El elemento se comporta como un elemento de lista <li>,
lo que quiere decir que tendrá una viñeta (bullet) delante
(excepto en algunos navegadores muy antiguos).
display : table | table-row | table-cell
El elemento se comportará como una tabla. Los elementos anidados tendrían que mostrarse como elementos de tabla
(display:table-row;, display:table-cell), imitando de esta manera el comportamiento de una tabla.
Pa probar to lo que queramos
A continuación podemos testar jugando o jugar testando la propiedad display.
Cambiando la opción de los <select> cambia también el valor de la propiedad display.