Display

Antes de comenzar, debemos saber que cada etiqueta HTML tiene un «tipo de representación visual» en el navegador, lo que habitualmente se suele denominar el tipo de caja. Si no sabes nada sobre esto, te aconsejo echarle un vistazo antes al apartado Modelo de cajas.

Recordemos que, por defecto, cada elemento HTML tiene un tipo de representación concreto. Como norma general (con excepciones) los elementos que se utilizan dentro de un párrafo, son de tipo inline, mientras que los que se utilizan para agrupar, son de tipo block. La propiedad display de CSS permite modificar el comportamiento de un elemento HTML, cambiándolo al que le indiquemos, como por ejemplo inline o block (u otro de los que veremos más adelante).

Esta propiedad puede tomar muchos valores diferentes, pero los más comunes son estos tres:

  • block: hace que el comportamiento del elemento sea como un bloque.

  • inline: el elemento se renderizará en línea con otros elementos.

  • inline-block: el elemento tendrá un comportamiento mezcla entre los dos anteriores, que ahora voy a describir.

Estos se utiliza para alterar el flujo noramle de una pagina web. En el queso de que no seppas lo que es el flujo normal, la documentación de la MDN define el flujo normal de la siguiente manera:

El flujo normal, o flow Layout, es la forma en que los elementos de bloque y en línea se muestran en una página antes de que se realicen cambios en su diseño.

display: inline

Los elementos en línea no admiten dimensiones (width, height) pero si admiten margin, padding y border, solo ocupan lo que tengan en su contenido, es decir, aunque quieras declarar un ancho y alto a un elemento de línea no podrá tener efecto ya que estos elementos no aceptan dimensiones, así también lo explica la documentación de la MDN:

Aunque puedas aplicarle margin, padding y border a un elementos en linea tiene algunas pegas:

  • Si el padding o el border es muy grande, ese este no respetara los elementos de bloque, se los comera. Sin embargo si respeta los elementos en linea

  • Si se solapa con margenes de los elementos en bloque, los de bloque ganara, es decir se superponeran.

Si hay varios elementos en línea estarán colocados de izquierda a derecha (uno al lado de otro).

Por ejemplo, el elemento HTML <span> es un elemento de línea por defecto y no importa cuántas etiquetas <span> haya, siempre aparecerán en línea o, en otras palabras, una inmediatamente después de la otra, produciendo una cadena continua de texto. 

 <span class="inline">Soy un elemento de linea</span>
 <span class="inline">Soy otro elemento de linea</span>
 <span class="inline">Soy otro elemento más de linea</span>
.inline {
    background-color: khaki;
}

display: block

Un elemento de bloque es un elemento que ocupa el ancho máximo disponible. Tal y como dice la documentación de la MDN:

De manera predeterminada, el contenido de un elemento de nivel de bloque es el 100% del ancho de su elemento padre y su altura viene determinada por su contenido.

Esto nos quiere decir que los elementos de tipo bloque abarcan el 100% del espacio que tengan disponible, es decir, se estiran por todo el ancho de la página.

Cabe mencionar que estos elementos si admiten dimensiones pero no pueden tener otro elemento a su lado ya que abarcan todo el espacio que tengan disponible por lo tanto estarán colocados de arriba hacia abajo. 

 <p class="block">Soy un elemento de bloque</p>
 <p class="block">Soy otro elemento de bloque</p>
 <p class="block">Soy otro elemento más de bloque</p>
.block {
    background-color: khaki;
}

display: inline-block

Es una combinación entre los dos tipos de elementos mencionados anteriormente (block e inline), los elementos con el valor inline-block admiten dimensiones pero todavía son elementos de línea, es decir estarán colocados uno al lado de otro.

Ele elemento <img> es un elemento con la propiedad display: inline-block;

<div class="block"> Bloque 1 </div>
<div class="block"> Bloque 2 </div>
.block{
  background-color: lightblue;
  width: 100px;
  height: 100px;
  margin: 5px;
  padding: 5px;
  display: inline-block;
}

Bibliografia

PreviousDesbordamiento y Colapso de margenesNextPosition

Last updated