display:block → el elemento coge el ancho, el alto especificados y se coloca verticalmente a continuación del anterior. Si tiene contenido y no especificamos ancho ni alto, el ancho será el 100% de la capa que lo contiene y el alto será lo que ocupe el contenido.
display:inline → el elemento no coje el ancho ni el alto y se coloca horizontalmente a continuación del anterior.
display:inline-block → el elemento coge el ancho y el alto y se coloca horizontalmente a continuación del anterior.
Eliminar la separación entre capas cuando usemos display: inline-block
Para evitar el espacio en blanco que hay entre las capas podemos:
- poner las capas una a continuación de la otra, sin saltos de línea ni espacios en blanco.
- comentar los saltos de línea
<div></div><!-- --><div></div> - Ajustar la maquetación de las capas
<div></div ><div></div> - trabajar los font-size de 0px para eliminar esta separación (para mi gusto, la peor opción).
