Display en CSS

Display en CSS

El atributo display en CSS tiene una gran importancia en la definición de los estilos al realizar una página web. Su función es alterar la forma natural en la que las etiquetas de HTML despliegan su contenido.

A continuación sus valores más prácticos:

En línea o en bloque

Cada etiqueta de HTML tiene una forma de desplegar su contenido, puede ser en línea o en bloque.

En línea: El contenido de la etiqueta se muestra en el mismo renglón que el resto de elementos que le rodean.

display en línea
Display en línea

En bloque: El contenido de la etiqueta se muestra en un renglón nuevo, separado de los elementos que le rodean.

Display en bloque
Display en bloque
Para efectos de estilos en cascada (CSS), a un elemento en línea no se le puede asignar los atributos de alto y ancho (width y height).

inline

El valor inline se le puede otorgar al atributo display de un elemento html que originalmente sea de bloque, para convertirlo a un elemento en línea.

Un ejemplo puede ser una lista de definición donde queramos que tanto el término como su definición aparezcan en la misma línea:

See the Pen displayInline by Miguel Méndez (@codigo-web) on CodePen.0

block

El valor block se le puede otorgar al atributo display de un elemento html que originalmente sea en línea, para convertirlo a un elemento en bloque.

Un ejemplo puede ser una liga que deseamos aparezca en un solo renglón, aislada de los elementos que le rodean:

See the Pen displayBlock by Miguel Méndez (@codigo-web) on CodePen.0

inline-block

inline-block cuenta con las características de ambos elementos (en línea y en bloque), ya que se puede aprovechar la virtud de poder establecer ancho y alto (en bloque), mientras se conserva el elemento en el mismo renglón (en línea).

Un típico ejemplo son los botones de un menú, a los elementos de una lista (li) se le asignan alto y ancho, pero a la vez, se conservan en la misma línea:

See the Pen displayInlineBlock by Miguel Méndez (@codigo-web) on CodePen.0

Oculto

Por omisión, todos los elementos de HTML son visibles.

none

Con el valor none del atributo display, el elemento no se muestra en la página web.

See the Pen displayNone by Miguel Méndez (@codigo-web) on CodePen.0

Tablas

Es posible generar una tabla únicamente con CSS, sin necesidad de utilizar las etiquetas de HTML establecidas para tal fin.

display: table;              
/* -- Equivalente a <table></table> --*/

display: inline-table;       
/* -- Equivalente a <table></table> (En línea) --*/

display: table-column-group; 
/* -- Equivalente a <colgroup></colgroup> --*/

display: table-column;       
/* -- Equivalente a <col></col> --*/

display: table-header-group; 
/* -- Equivalente a <thead></thead> --*/

display: table-row-group;    
/* -- Equivalente a <tbody></tbody> --*/

display: table-row;          
/* -- Equivalente a <tr></tr> --*/

display: table-footer-group; 
/* -- Equivalente a <tfoot></tfoot> --*/

display: table-cell;         
/* -- Equivalente a <td></td> ó <th></th> --*/

display: table-caption;      
/* -- Equivalente a <caption></caption> --*/

See the Pen displayTable by Miguel Méndez (@codigo-web) on CodePen.0

Al construir una tabla únicamente con estilos en cascada, no es posible agregar colspan o rowspan para aumentar el número de espacios que ocupan las celdas.

Flexbox

Con CSS3 llegó un valor para el elemento display sumamente útil para distribuir los espacios de los elementos hijos de un contenedor que cuente con el valor flex del atributo display.

See the Pen displayFlex by Miguel Méndez (@codigo-web) on CodePen.0

Debido a su complejidad, el valor flexbox merece su propio apartado, en un artículo futuro platicaremos de sus propiedades.

Conclusión

El atributo display en CSS controla la forma en que se muestra el contenido de las etiquetas HTML en las páginas webEn la práctica es de gran utilidad saber utilizarlo de forma adecuada.

¿Te fue útil el artículo? Por favor ayúdanos a difundirlo compartiéndolo a través de tus redes sociales.

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Déjanos un comentario

Sé el primero en comentar

avatar
wpDiscuz