Elementos en bloque y línea en html (Guía definitiva)

Bienvenidos a un nuevo post de la Escola Espai. Hoy quiero hablaros de un problema que me encuentro con mucha regularidad en las clases de maquetación en html y css: el tratamiento de los elementos en bloque y línea. Este post pretende ser una guía definitiva para aprender a diferenciarlos, y así trabajar con ellos correctamente en css. Aprenderemos a mover elementos, colocarlos uno al lado de otro, centrarlos, etc. Así podremos estructurar sin problemas nuestras páginas web, evitando jaquecas y comportamientos extraños de nuestros elementos html.

¿En qué se diferencian los elementos en bloque y línea?

No es difícil entender qué los diferencia. Normalmente los alumnos lo entienden a la perfección a la primera. Básicamente, cuando maquetamos en html construimos «cajas» y dentro de éstas ponemos el contenido. Estas «cajas» son lo que conocemos como elementos de tipo bloque. Dependiendo de la etiqueta que hayamos usado para crear un bloque, tendrá un significado u otro para el navegador. No es lo mismo usar un div (divisón) que un h1 (título), pero en cierto modo -y estrictamente en términos de maquetación- ambas etiquetas crean una caja.

Debemos entender que los bloques jamás van a permitir que haya nada a su lado. Aunque haya espacio. Nunca podremos colocar nada junto a un elemento en bloque. Por ello, en una web sin formato todos los elementos se ordenan de forma vertical. Los elementos en bloque crean saltos de línea y esto es debido a que siempre ocuparán el 100% del ancho. Si le dices a un bloque que ocupe un ancho determinado en píxeles (width: 200px; por ejemplo), dará lo mismo: creará un margen a su lado que impedirá que cualquier elemento se ponga junto a él.

Etiquetas en bloque tenemos muchas. Las más conocidas son el div, los títulos (del h1 al h6), las p, las listas ul con sus elementos de lista li… Aquí os dejo un enlace con todas las etiquetas tipo bloque que existen: https://developer.mozilla.org/es/docs/Web/HTML/Block-level_elements.

Por otro lado, tenemos los elementos en línea. Si los elementos en bloque eran el contenedor, debemos tratar a los elementos en línea como contenido. De la misma forma que una letra se coloca al lado de otra cuando escribimos un texto, cuando colocamos un elemento en línea junto a otro se colocará a su lado siempre que el ancho de pantalla lo permita. Podemos tratar a los elementos en línea como si fuera texto. No están pensados para ser contenedores, sino que son contenido por ellos mismos. Así pues, un elemento en línea sólo ocupa lo estrictamente necesario, no el 100% como sí ocurre con los bloques.

Debemos entender las diferencias entre ambos elementos para poder crear nuestras estructuras con css. No podemos tratar por igual a un elemento en bloque y en línea, es uno de los errores más comunes cuando se comienza a maquetar.

Creando estructuras con css

Ya sabemos que un bloque jamás va a permitir que un elemento se posicione a su lado. Si queremos que esto ocurra, deberíamos transformar el bloque en otra cosa, ¿no es de lógica?

Por ejemplo, podríamos transformarlo en un elemento flotante con la propiedad float; o hacer que un elemento en bloque se vuelva del tipo línea. Gracias a esta transformación un bloque permitirá que hayan otros elementos a su lado. Así crearemos estructuras con columnas y ganaremos horizontalidad en nuestros diseños. Sin embargo, al transformar nuestros elementos bloque ganarán una serie de propiedades con las que quizá no hayamos contado, y sino somos conscientes de esto nos encontraremos con comportamientos extraños que agotarán nuestra paciencia.

Los problemas de la flotación

Cuando enseño a flotar elementos en html siempre repito un mantra: cuando uséis flotaciones SIEMPRE vamos a ponerle un overflow:auto al contenedor. Esto puede servir para aquellos que se inician en maquetación y no acaban de comprender cómo funciona el stacking order de css. Gracias a esta norma podemos evitar comportamientos extraños en el diseño. Sin embargo cuando una regla carece de sentido y la aplicamos simplemente porque nos la ha dicho el profesor, puede ser que se nos olvide o que la apliquemos de forma incorrecta.

!Pero eso se acabó¡ En algún punto dejamos de ser principiantes, ¿no? Si entendemos lo siguiente podremos estructurar de manera mucho más efectiva.

Cuando le damos float a un bloque deja de ser un bloque. Se convierte en un elemento flotante. Los demás bloques dejarán de reconocerlo y por lo tanto ocuparán el espacio que ha dejado libre nuestro nuevo elemento flotante. Ahí es cuando nuestra web se estará comportando de manera «extraña». Porque cuando flotamos un bloque de html estamos perdiendo el área que ocupaba ese bloque.

Esto puede causar lo siguiente:

1- Que un contenedor pierda su contenido. Si flotamos todo lo que hay dentro de un contenedor este se quedará vacío, porque recordemos que un bloque no reconoce a los elementos flotantes (es como si no existieran). Debemos evitar esto a toda costa. ¿Cómo? Con overflow:auto. Con esta regla de css le estaremos diciendo a un contenedor que recoja todo el contenido que sobresalga de éste. Así el contenedor reconocerá de nuevo el contenido y los demás elementos volverán a ocupar el área que les toca.

2- Que otros bloques ocupen el espacio que no les toca. También puede ocurrir que si dentro de un contenedor tenemos algunos bloques que flotan y otros que no, nos sucedan cosas extrañas. Ya os podéis imaginar por qué. Nuevamente lo mismo: los bloques que no flotan no reconocen a los que sí. Para solucionarlo tenemos la regla clear:both. Con esta regla limpiamos las flotaciones y así los bloques respetarán el espacio de los elementos flotantes que encuentren antes que ellos.

Último consejo

!Wow¡ No era tan díficil, ¿o sí? Sé que a algunos aún les parecerá algo denso. La verdad es que puede llegar a ser algo bastante abstracto, pero una vez se ha entendido la idea es lo más fácil del mundo. Creedme.

Sólo me queda un último consejo para aquellos que no lo hayan entendido: practicad mucho. Probad de hacer estructuras, poned y quitad flotaciones, overflows, etc. Así hasta que entendáis la filosofía que se esconde detrás de todo esto. Una vez lo hayáis entendido podréis maquetar webs en un abrir y cerrar de ojos.

¡Mucho ánimo!