display:block, inline, inline-block

Contactar con el profesor

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.

display:inline-block → separación entre capas

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).

float:left

Elementos con display:block y float:left se irán posicionando horizontalmente.

  • Es necesario indicar este estilo tanto a la capa sobre la que me apoyó como a la capa que se apoya.
  • Este posicionamiento hace que la capa contenedora de los div con float no crezca según estos van creciendo. Para solucionarlo, puedo poner overflow:auto u overflow:hidden a la capa contenedora.
  • El estilo clear:right hace que cuando usas float no quepan elementos a la derecha. El estilo clear:both hace que no quepan a ambos lados.
.iceburg{
	position:fixed
}
.titanic{
	float:none
}

Ejemplo de varios posicionamientos

← Ejercicio - display:inline-block y float:left
Margin Collapse →

Aviso Legal | Política de privacidad