Todos los elementos HTML tienen un tipo de representación. Con display en CSS podemos cambiarlos por otros tipos (inline, block...).

Cada etiqueta HTML tiene una representación visual en un navegador, lo que habitualmente se suele denominar el tipo de caja. En principio, se parte de dos tipos básicos:

Valor Denominación Significado Ejemplo
inline Elemento en línea El elemento se coloca en horizontal (ocupa sólo su contenido). <span>
block Elemento en bloque El elemento se coloca en vertical (ocupa todo el ancho disponible). <div>

Para entender esto facilmente, vamos a crear un HTML con 3 etiquetas <div> como las siguientes:

<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>

A estas etiquetas HTML le vamos a aplicar el siguiente código CSS:

div {
    background:blue;
    color:white;
    margin:1px;
}

Con esto observaremos que en nuestro navegador nos aparecen 3 cajas azules colocadas en vertical (una debajo de otra) que cubren todo el ancho disponible de la página. Esto ocurre porque la etiqueta <div> es un elemento en bloque, o lo que es lo mismo, que tiene un tipo de representación block por defecto. Cada etiqueta HTML tiene un tipo de representación concreta.

Sin embargo, este comportamiento de elementos puede cambiarse con la propiedad CSS display. Tan sencillo como añadir display: inline en el ejemplo anterior y veremos como pasan a ser 3 cajas azules colocadas en horizontal (una al lado de la otra) que cubren sólo el ancho del contenido de cada una. Ahora los <div> de esa página son elementos en línea.

Otros tipos de elementos

A medida que vamos cambiando el tipo de representación de estos elementos, nos damos cuenta que es insuficiente para realizar tareas y vamos necesitando más tipos de caja. Vamos a completar un poco más la tabla, con las características más importantes de las opciones que puede tomar la propiedad CSS display:

Tipo de caja Características
block Vertical. Ocupa todo el ancho disponible de su etiqueta contenedora.
inline Horizontal. Se adapta al ancho de su contenido. Ignora propiedades como width o height.
inline-block Combinación de los anteriores. Se comporta como inline pero no ignora width o height.
flex Utiliza el modelo de cajas flexibles flexbox. Muy útil para diseños adaptables.
inline-flex La versión en línea del modelo de cajas flexibles flexbox.
list-item Actúa como un ítem de una lista. Es el comportamiento de etiquetas como <li>.
table Actúa como una tabla. Es el comportamiento de etiquetas como <table>.
table-cell Actúa como la celda de una tabla. Es el comportamiento de etiquetas como <th> o <td>.
table-row Actúa como la fila de una tabla. Es el comportamiento de etiquetas como <tr>.
run-in Actúa dependiendo del tipo de elementos que le rodea (soporte pobre en navegadores).

Ocultar elementos

Existe un truco bastante interesante para ocultar elementos con CSS. Mediante la mencionada propiedad display podemos aplicar un valor none y ocultar completamente elementos que no queramos que se muestren, los cuales desaparecen por completo. Es muy útil para hacer desaparecer información cuando el usuario realiza alguna acción, por ejemplo.

Tipo de caja Características
none Hace desaparecer visualmente el elemento, como si no existiera.

No obstante, también existe una propiedad CSS llamada visibility que realiza la misma acción, con la ligera diferencia de que no sólo oculta el elemento, sino que además mantiene un vacío con el mismo tamaño de lo que antes estaba ahí.

Dicha propiedad visibility tiene las siguientes opciones:

Valor Significado
visible El elemento es visible.
hidden El elemento no es visible pero sigue ocupando su espacio.
collapse Sólo para tablas. El elemento se contrae para no ocupar espacio.

Ojo: Utilizar visibility:hidden es muy interesante si queremos que un elemento y su contenido se vuelva invisible, pero siga ocupando su espacio y así evitar que los elementos que le sigan se desplacen hacia arriba, lo que suele ser un comportamiento bastante molesto en algunos casos.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).