display:block, inline, inline-block

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Curso de HTML

31.  
32.  
35.  
38.  
53.  

La propiedad display nos permite definir, para un elemento de HTML:

  • Como será mostrado.
  • Como se va a comportar con respecto de los elementos que lo rodean.
  • En el caso de los estilos display: grid y display:flex, permite definir la estrutura o layout de los elementos internos.

El valor por defecto de la propiedad display para la mayoría de los elementos es usualmente block (de bloque) o inline (en línea).

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. Algunos ejemplos de etiquetas cuya propiedad display es block son: div, p, form

display: inline → el elemento no coje el ancho ni el alto y se coloca horizontalmente a continuación del anterior. Algunos ejemplos de etiquetas cuya propiedad display es inline son: a, span.

display: inline-block → el elemento coge el ancho y el alto y se coloca horizontalmente a continuación del anterior.

display: table → aunque mucho menos frecuente que los estilos anteriores, este estilo alinea los elementos verticalmente pero ajusta su ancho al ancho del contenido, siendo una mezcla de display: block y de de display: inline-block.

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).
Uso del estilo display:block

Ejemplo de varios posicionamientos

← Ejercicio de maquetación vertical con HTML
Ejercicio 3 columnas →