#14 Bloques y elementos en línea#14 Bloques y elementos en línea

El flujo normal

Sin CSS, el navegador coloca las cajas siguiendo unas reglas fijas que se llaman flujo normal. Ya lo has visto en todas tus páginas:

• Los títulos, párrafos, listas y secciones se apilan de arriba abajo, cada uno en su propia fila.
• Los enlaces, negritas y cursivas van dentro de la línea de texto, uno detrás de otro, como palabras.

Esto pasa porque cada elemento tiene un tipo de caja por defecto, que se controla con la propiedad display.

Bloque y en línea

1
2
3

Cambiar el tipo con display

La propiedad display permite cambiar el tipo de caja de cualquier elemento. Que algo sea un <li> (de bloque) no le impide colocarse en línea si tú lo dices.

display: inline-block: lo mejor de los dos

Se coloca en línea, como el texto, pero acepta ancho, alto, padding y márgenes como un bloque. Es ideal para botones, etiquetas o menús sencillos:

1
2
3
4
5
6
7

Fíjate en list-style: none (quita las viñetas) y padding: 0 (quita la sangría que trae la lista). Son las dos líneas que verás en casi todos los menús.

display: block: un enlace que ocupa toda la fila

Al revés también funciona. Un enlace con display: block ocupa todo el ancho, y se puede hacer clic en cualquier parte de la fila, no solo en el texto:

.lista-ajustes a {
  display: block;
  padding: 16px;
}

display: none: ocultar

display: none oculta por completo un elemento: no se ve y no ocupa espacio, como si no existiera. Lo usarás, por ejemplo, para esconder algo en el móvil y mostrarlo en el ordenador.

1
2
3

Lo que viene: flex y grid

display tiene dos valores más que han cambiado por completo la forma de hacer webs: display: flex y display: grid. Con ellos colocarás cajas en filas, columnas y cuadrículas con muy pocas líneas. Son las dos próximas lecciones, y con ellas inline-block se queda para casos pequeños.

Errores típicos

• Dar width, height o margen vertical a un elemento en línea (<a>, <span>) y que no haga nada. Cámbialo a inline-block o block.
• Usar <br> o espacios para colocar cosas. Para eso está display (y, pronto, Flexbox).
• Olvidar quitar las viñetas y el padding de una lista que se usa como menú.
• Ocultar con display: none contenido importante que debería estar visible para todo el mundo.

Ejercicios

Ejercicio 1: etiquetas (fácil)

Convierte estos <span> en etiquetas: fondo lavender, 4px 10px de relleno, esquinas de 999px y 4px de margen a la derecha. Después prueba a darles width: 120px con display: inline y con display: inline-block. ¿Qué cambia?

1

.etiqueta {
  display: inline-block;
  background: lavender;
  padding: 4px 10px;
  border-radius: 999px;
  margin-right: 4px;
}

Ejercicio 2: el menú en línea (medio)

Haz que este menú se vea en horizontal, sin viñetas, con cada enlace como un botón con relleno, borde de 2px negro y un :hover con fondo amarillo.

1
2
3
4
5

.menu {
  list-style: none;
  padding: 0;
}

.menu li {
  display: inline-block;
}

.menu a {
  display: inline-block;
  padding: 8px 14px;
  border: 2px solid black;
  color: black;
  text-decoration: none;
}

.menu a:hover,
.menu a:focus {
  background: yellow;
}

Ficha resumen

• Flujo normal: bloques de arriba abajo; elementos en línea dentro del texto.
• Bloque: línea nueva, todo el ancho, acepta width/height. En línea: mide su contenido, ignora width/height.
• display: inline-block = en línea pero con medidas de bloque.
• display: none = oculto y sin ocupar espacio.
• Menús: list-style: none; padding: 0; en la lista.

Glosario