Unidad 13. Posicionamiento. Flexbox. Grid (VII)

 

13.7. La propiedad display

En este vídeo explicamos la propiedad Display:

La propiedad display es muy importante a la hora de posicionar los elementos en una página web ya que determina el espacio que va a ocupar un elemento. Existen dos tipos básicos de display, el bloque (block) y en línea (inline). Cada elemento o etiqueta de HTML tiene asignado por defecto un tipo de display, pero podemos cambiarlo. Las etiquetas con display en línea más usadas son la etiqueta span, la etiqueta a (hiperenlace), etiqueta img y las etiquetas de formateo de palabras (strong, b, code, s, i , ...). Las etiquetas de bloque más usadas son p, div, table, ol, ul, h1, h2.

En HTML los elementos se posicionan uno a continuación de otro según los vamos escribiendo pero los elementos de bloque ocupan todo el ancho disponible, bien hasta el final de la línea o bien hasta el final de su contenedor. Es decir, se colocan unos debajo de otros. El ejemplo más claro es el párrafo, aunque un párrafo solo tenga una palabra ocupará toda la línea, y el siguiente párrafo se colocará en la línea siguiente.

En el siguiente ejemplo hemos dado un borde azul a los párrafos para que se ve lo que ocupan.

Párrafo uno.

Párrafo dos.

Los elementos en línea ocupan sólo el ancho necesario para que quepa su contenido y se irán colocando uno al lado del otro, en la misma línea mientras haya sitio. Por ejemplo, si escribimos un hiperenlace de una palabra, y escribimos otro hiperenlace se colocará a continuación, no en la siguiente línea. Lo mismo sucede con las imágenes, se van colocando una al lado de otra.

En el siguiente ejemplo hemos dado un borde a los hiperenlaces para que se ve lo que ocupan.

Hiperenlace uno. Hiperenlace dos. Otro texto

Como decíamos el tipo de display se puede cambiar, por ejemplo, a continuación se ve el efecto de cambiar el tipo de display a inline de los párrafos del ejemplo anterior, ahora sólo ocupan el espacio disponible, no toda la línea.

Párrafo uno.

Párrafo dos.

Este es el código:

<p style="display: inline">
Párrafo uno. </p>
<p style="display: inline  ">
Párrafo dos. </p>

Y al contrario, en el siguiente ejemplo hemos cambiado el tipo de display del hiperenlace a bloque para lograr que cada hiperenlace ocupe toda la línea.

Hiperenlace uno. Hiperenlace dos. Otro texto

Los elementos de bloque no se pueden anidar dentro de los elementos en línea, por ejemplo, no podemos incluir un párrafo dentro de un hiperenlace.

Los elementos en línea no pueden tener atributos de anchura y altura, puesto que sus dimensiones dependen del contenido. Es decir, no podemos cambiarles la anchura y altura. Los elementos de bloque sí lo permiten.

inline-bloc

Existe un tipo híbrido entre el bloque y en línea, se trata del inline-block que se comporta como el tipo en línea pero si se le pueden cambiar la anchura y altura.

En el siguiente ejemplo hemos dado tipo inline-block a los hiperenlaces y le hemos cambiado la anchura.

Hiperenlace uno. Hiperenlace dos. Otro texto

Este es el código:

<a href="#" style="display: inline-block; width: 15em"> Hiperenlace uno.</a>
<a href="#" style="display: inline-block; width: 15em > Hiperenlace dos.</a>

También podemos utilizar un valor de display un tanto especial, el valor none, que hace que el elemento no se muestre. Este valor se puede utilizar para mostrar/ocultar elementos en función de determinadas condiciones o eventos. Por ejemplo, según determinada anchura de la pantalla no mostraremos algunos párrafos, o al hacer clic en una imagen aparecerá otra imagen. En la unidad siguientes veremos algunos ejemplos de este tipo.

Existen otros valores menos usados de display como los que definen los comportamientos de las tablas (table, table-cell, table-column, ...)

Además, existen dos nuevos modelos de posicionamiento basados en los valores flex y grid de la propiedad display que vamos a ver a continuación.