Probablemente, una de las partes más complejas de CSS sea la creación de layouts, colocación y distribución de los elementos de una página. Sin embargo, es una parte fundamental dentro de CSS, y es necesario entenderla correctamente para que resulte más fácil de trabajar y crear nuestros diseños.
inline
y block
?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.
Volviendo al tema, todos los elementos de una página web deben tener un tipo de representación, que es la forma en la que se va a comportar. En principio, partimos de dos tipos básicos y fundamentales llamados inline
y block
.
Valor | Denominación | Significado | Ejemplo |
---|---|---|---|
inline |
Elemento en línea | El elemento se coloca a continuación del otro (en horizontal). | <span> |
block |
Elemento en bloque | El elemento se coloca encima de otro (en vertical). | <div> |
Como se menciona en la tabla anterior, por defecto, todos los elementos <div>
se comportan como elementos de bloque (block) y todos los elementos <span>
se comportan como elementos en línea (inline). Para entender esto facilmente, crea un documento HTML con 3 etiquetas <div>
como las siguientes:
<div>Elemento 1</div>
<div>Elemento 2</div>
<div>Elemento 3</div>
<style>
div {
background: blue;
color: white;
margin: 1px;
}
</style>
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, un elemento que se apila uno encima de otro y ocupan todo el ancho de su contenedor padre. Cada etiqueta HTML tiene un tipo de representación concreta.
El comportamiento de los elementos HTML puede cambiarse mediante la propiedad CSS display
. Por ejemplo, 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), cubriendo sólamente el ancho del contenido de cada una. Esto ocurre porque los <div>
han pasado a comportarse como elementos en línea (el tipo de representación visual que tienen los <span>
por defecto).
display
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).
Propiedad | Valores | Descripción |
---|---|---|
display |
none | tipo | Cambia el tipo de representación del elemento al indicado. |
Existe una amplia gama de tipos de representación de elementos HTML que podemos utilizar mediante la propiedad display
. Veamos cuales son en la siguiente tabla:
Tipo de caja | Características | Ver |
---|---|---|
block |
Se apila en vertical. Ocupa todo el ancho disponible de su etiqueta contenedora. | |
Versión en línea | ||
inline |
Se coloca en horizontal. Se adapta al ancho de su contenido. Ignora width o height . |
|
inline-block |
Combinación de los dos anteriores. Se comporta como inline pero no ignora width o height . |
|
Versión flexible | ||
flex |
Utiliza el modelo de cajas flexibles de CSS. Ideal para estructuras de 1 dimensión. | Ver Flexbox CSS |
inline-flex |
Versión en línea (ocupa sólo su contenido) del modelo de cajas flexibles de CSS. | Ver Flexbox CSS |
Versión de cuadrículas | ||
grid |
Utiliza cuadrículas o rejillas con el modelo de cajas Grid CSS. | Ver Grid CSS |
inline-grid |
La versión en línea (ocupa sólo su contenido) del modelo de cajas grid css. | Ver Grid CSS |
Versión de listas y tablas | ||
list-item |
Actúa como un ítem de una lista. Es el comportamiento de etiquetas como <li> . |
Ver listas HTML |
table |
Actúa como una tabla. Es el comportamiento de etiquetas como <table> . |
Ver tablas HTML |
table-cell |
Actúa como la celda de una tabla. Es el comportamiento de etiquetas como <th> o <td> . |
Ver tablas HTML |
table-row |
Actúa como la fila de una tabla. Es el comportamiento de etiquetas como <tr> . |
Ver tablas HTML |
Otros | ||
contents |
Ignora la caja del elemento. Útil para mantener Grid/Flex aún teniendo un wrapper intermedio. | |
none |
Oculta el elemento visualmente, como si no existiera en el HTML. |
Como se puede observar, mediante la propiedad display
podemos establecer diferentes mecanismos de maquetación, desde los básicos block
e inline
que hemos mencionado, pero tenemos muchos más.
inline-block
Si utilizamos la propiedad display
con el valor inline-block
, conseguiremos un elemento que funcionará como si fuera un elemento inline
, pero haciendo caso a las propiedades width
y height
, las cuales se ignoran si estamos utilizando un display: inline
.
<div>Elemento 1</div>
<div>Elemento 2</div>
<style>
div {
display: inline-block;
width: 250px;
background: steelblue;
color: white;
}
</style>
Esto nos puede venir muy bien cuando necesitamos una mezcla de los dos tipos básicos.
contents
Para este ejemplo, necesitaremos conocer previamente flex
o grid
. Utilizando display
se puede conseguir un comportamiento muy especial, que puede ser realmente útil en algunas ocasiones, sobre todo cuando trabajamos con librerías de terceros, WebComponents o con Javascript (o ciertos frameworks).
Hay situaciones donde se puede arruinar el diseño de maquetaciones Grid o Flex, porque son sistemas que funcionan relacionando un elemento padre con su hijo, por lo que si se cambia el marcado HTML de forma que se rompa esa relación, el diseño deja de ser efectivo.
Imaginemos la siguiente situación, donde tenemos un layout creado con Grid:
<div class="grid">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
<div class="item item-4"></div>
<div class="item item-5"></div>
<div class="item item-6"></div>
</div>
<style>
.grid {
display: grid;
grid-template-columns: repeat(3, 200px);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}
.item {
background: deeppink;
}
</style>
Si introducimos un elemento con clase .middle
dentro del .grid
, que envuelva a todos los .item
, el grid dejaría de funcionar porque se ha eliminado la relación padre-hijo entre .grid
y los elementos .item
. Sin embargo, si añadimos un .middle
con un CSS asociado .middle { display: contents }
, el navegador ignorará ese elemento intermedio que insertamos por razones de funcionalidad (normalmente en situaciones de sólo diseño no ocurre) y hará como que no existe.
Mediante la propiedad display
también podemos utilizar flex
, grid
, list-item
o table
(o cualquiera de sus derivados). Para comprender como funcionan, es recomendable acceder a su sección específica, donde se explicará más en profundidad.
Existen múltiples formas de ocultar elementos del HTML, de forma que se ocultan visualmente pero el marcado de etiquetas HTML continua existiendo en la página. Vamos a explicar cada una de ellas:
Propiedad | Valores | Descripción | Más info |
---|---|---|---|
display |
none | Oculta de forma visual y por completo el elemento indicado. | |
visibility |
visible | hidden | collapse* | Oculta un elemento manteniendo su espacio visual. | |
opacity |
1 | |
Opacidad del elemento, medido en valores numéricos o porcentajes. | Ver opacity |
display: none
Quizás, la forma más habitual de ocultar un elemento es utilizar el valor none
de la propiedad display
. Esto hace que el navegador ignore por completo ese elemento, no mostrándolo visualmente. Sin embargo, existen algunas otras formas con ciertas diferencias y matices.
visibility
Existe una propiedad CSS llamada visibility
que podemos utilizar con el valor hidden
. Realiza una acción similar a display: none
con la ligera diferencia de que no sólo oculta el elemento, sino que además mantiene el «hueco», el espacio vacío (con el mismo tamaño que cuando se mostraba).
Dicha propiedad visibility
tiene los siguientes valores posibles:
Valor | Significado |
---|---|
visible | El elemento es visible. Valor por defecto. |
hidden |
El elemento no es visible pero sigue ocupando su espacio y posición. |
collapse |
Sólo para tablas. El elemento se contrae para no ocupar espacio. |
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 adyacentes se desplacen, lo que suele ser un comportamiento no deseado en muchas ocasiones.
opacity
Por otro lado, otra opción interesante y relacionada podría ser la posibilidad de utilizar la propiedad opacity
, especialmente útil si se utiliza junto a transiciones o animaciones.
La propiedad opacity
permite indicar valores numéricos desde 0 a 1, pudiendo indicar decimales. Si lo prefieres, puedes utilizar valores en porcentaje, de modo que el valor 0.5 es equivalente a usar 50%. Estos valores, al ser cuantificables, el navegador sabe perfectamente como transicionarlos o animarlos y se pueden hacer efectos donde elementos aparezcan o se desvanezcan gradualmente.
Tienes más información detallada en el artículo dedicado a la propiedad opacity y el artículo donde hablamos de las transiciones CSS.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev