display:block, inline, inline-block

Curso de HTML

6.  
8.  
10.  
12.  
16.  
17.  
24.  
31.  
33.  
35.  
36.  
37.  
39.  
44.  
45.  
46.  
51.  
53.  
55.  
58.  
59.  
65.  

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

Ejemplo de varios posicionamientos

← Ejercicio margin collapse
Ejercicio - display:inline-block y float:left →

Aviso Legal | Política de privacidad