Esta es otra propiedad, junto con la de position, que es imprescindible dominar, para maquetar ó contruir, páginas web.
Para comprender, la propiedad display, primero hay que analizar, el comportamiento de caja, osea la representación visual que tienen las etiquetas HTML
Estan las etiquetas, que tienen por defecto, el valor de display: inline;, como todas estas: <a>, <code>, <em>, <i>, <img>, <input>, <span>, <strong>, <sub>, <sup>, <u>, y algunas más, y que significa esto, pues que su representación visual, va a ser en línea, con otros elementos ó etiquetas, del documento ó la página. Son elementos que solo ocuparán, el espacio justo de su contenido, y no se les puede asignar, porqué no lo cogen, ni width, ni height (anchura y altura).
También encontramos las etiquetas, que por defecto, adoptan display: block;, como: <div>, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <li>, <pre>, <table>, <tr>, <td>, <dl>, <dd>, <dt>, <section>, <article> y algunas más, estas etiquetas se comportan, como elementos de bloque, no admiten, otros elementos a su lado (a no ser que uses float) y provocán, un salto de línea, en el documento, es decir se apilan, unos debajo de otros.
Veamos graficámente estos valores de display con dos sencillos ejemplos:
Así es como se comportán, por defecto, dependiendo de su valor de display, las etiquetas html, pero nosotros podemos asignarle otros valores y variaremos su comportamiento.
Se apila en vertical. Ocupa todo el ancho disponible de su etiqueta contenedora.
Se coloca en horizontal. Se adapta al ancho de su contenido. Ignora width o height.
Combinación de los dos anteriores. Se comporta como inline pero no ignora width o height.
Actúa como un ítem de una lista. Es el comportamiento de etiquetas como <li>.
Actúa como una tabla. Es el comportamiento de etiquetas como <table>.
Actúa como la celda de una tabla. Es el comportamiento de etiquetas como <th> o <td>.
Actúa como la fila de una tabla. Es el comportamiento de etiquetas como <tr>.
Utiliza el modelo de cajas flexibles de CSS. Ideal para estructuras de 1 dimensión.
Versión en línea (ocupa sólo su contenido) del modelo de cajas flexibles de CSS.
Utiliza cuadrículas o rejillas con el modelo de cajas Grid CSS.
La versión en línea (ocupa sólo su contenido) del modelo de cajas grid css.
Ignora la caja del elemento. Útil para mantener Grid/Flex aún teniendo un wrapper intermedio.
La propiedad, display: inline-block; es muy útil, para conseguir, que etiquetas inline, sigán, siendo elementos en línea, pero con la carácteristica, de poder dotarlas de anchura (width) y altura (height), que nos puede servir, para estilizarlas con CSS.
De display: none; cabe mencionar, que oculta totalmente, el elemento, del documento y los elementos adyacentes, ocupan su espacio, para evitar este comportamiento, si no nos interesa en nuestra maquetación, podemos jugar con las propiedades opacity ó visibility y conseguimos, ocultar el elemento, pero sigue ocupando su espacio, y además son propiedades, a las que podemos aplicar, algún tipo de efecto, con las propiedades, transition ó animation de CSS.
Sobre las propiedades display flex y grid, no me extiendo mucho, porque merecen una explicación más detallada, pero solo anticipar, que aprendiendo a manejarlas, conseguiremos, maquetar páginas completas, además con la carácteristica de que seran responsives, osea adaptables, a las medidas, de los distintos dispositivos.
Para observar, mejor, todos los valores de display, he preparado otro par de ejemplos prácticos, que pienso que es como mejor se ven las cosas, uno que varía, el comportamiento de un <span> (display:inline), y otro el de unos <p> (display:block), espero os gusten:
Soy un <p></p> (display:block;), que contengo un <span>(width:240px;)</span>unodostres (display:inline;), al que puedes cambiarle, su valor de display, y ver su comportamiento, pinchándo en su correspondiente etiqueta.
Soy el primer párrafo.
A mi, me ha tocado ser el segundo.
Pues vale, yo seré el tercero.
Yo soy un humilde
<span>, que me han puesto aquí, para comprobar lo que pasa, cuando los párrafos de arriba, tengán display:none;
Bueno, me despido, espero haber aclarado dudas, sobre esta propiedad, a quien las tuviera, habreís observado, que es una propiedad vital de saber utilizar, para la maquetación web, así que ya sabeis, se aprende con la práctica, a jugar con esta propiedad y distintas etiquetas html, nada más, gracias por leer, si tienes alguna sugerencia, agradecería vuestro contacto, hasta la vista.
