¿Cómo se quita el puñetero relleno inferior que añade WordPress a los bloques de fondo, grupo, columna, imagen y la madre que lo parió mil veces?

No se a ti pero en mi caso me pasa mucho que, maquetando una web con bloques WordPress, siempre llega un momento en que quiero hacer algún tipo de efecto de imagen sobre imagen, como por ejemplo el efecto paralaje, y me arruina la fiesta el puñetero relleno que se añade por defecto a todos los bloques nativos de WordPress.

Ejemplo claro, de mi propia web personal…

Como imaginarás, no quiero para nada ese relleno, ese padding inferior que sale bajo la imagen, y que destroza del todo el efecto que quería crear en la página.

La estructura de ese elemento es la siguiente:

Bloque de fondo → bloque de grupo → bloque de columnas → bloque de imagen en la columna izquierda.

Hay más elementos, más bloques, pero los que afectan directamente a la maqueta de la imagen son estos, esa estructura de bloques. Pero vayamos al problema…

El puñetero problema: el puñetero padding de los bloques nativos de WordPress

Como te decía, el problema viene derivado porque los bloques nativos de WordPress tienen unos estilos por defecto, un CSS, que añade siempre de manera predeterminada relleno (padding) a todos los elementos, a todos los bloques y, en consecuencia, a su contenido.

Solo tienes que inspeccionar el código de cualquier página creada con bloques para ver en el código que hay padding en todos los bloques, normalmente de 1em.

Así que, también por lógica, lo que hay que hacer es saltarse esos estilos por defecto y aplicar unos nuevos estilos que, ahora sí, no añadan ningún relleno, ningún padding inferior en este caso, a mi imagen, al bloque de fondo, al de grupo o el que sea que está arruinando mi bonito resultado soñado.

La puñetera solución: el bendito CSS (con algo de ñapa)

Pues bien, la cosa es bien fácil de arreglar, solo hay que crear una nueva clase CSS que quite el puñetero padding, algo así:

/* Quitar el puñetero padding inferior */
.sin-padding-inferior{
padding-bottom: 0 !important;
}

Sencillito ¿verdad?

Creamos la nueva clase .sin-padding-inferior, y configuramos que todo elemento que la use tenga el padding-botton (relleno inferior) a cero, luego lo marcamos como importante (el también puñetero !important), que no me gusta, lo sé, no es buena costumbre, pero en este caso es casi imprescindible porque hay que pasarse por el arco del triunfo el CSS nativo de WordPress y casi siempre hará falta marcar este CSS nuestro como importante para conseguirlo.

Pero vamos, que puedes probar en cada caso a ver si te funciona sin ello,  se tarda poco y es más limpio, yo lo pongo porque sé lo que pasa, y te ahorro un comentario del tipo de «Fernando, no me funciona, no me hace caso el CSS, güorpré me tiene manía».

El CSS anterior tienes que añadirlo a tu web de una de estas maneras, a elegir:

• En la hoja de estilos del tema hijo (si lo tienes y lo usas).
• En la sección de CSS adicional si tienes activo un tema clásico.
• En el editor del sitio, en la sección de CSS personalizado, si usas un tema de edición completa del sitio mediante bloques.
• Con un plugin de snippets de código.

Una vez añadida tu nueva clase CSS comprobarás con estupor que no pasa nada, no se arregla nada.

No te asustes, no has hecho nada mal (de momento), es simplemente que sí, has creado una nueva clase CSS, pero ¿qué elemento de tu web la usa o tiene asignada?, pues ninguno, porque la acabas de crear.

La puñetera gozada: encontrar el puñetero bloque del puñetero padding

Lo siguiente que nos toca hacer es añadir esa clase CSS al elemento que nos está impidiendo que nuestra bonita foto esté fija en el borde inferior del bloque de fondo sin un horrible relleno inferior que queda fatal.

Y te preguntarás ¿dónde añado la nueva clase CSS?

Pues toca prueba-error, pero se tarda poco. Solo tienes que añadir la nueva clase .sin-padding-inferior en la sección de ajustes Avanzado → Clase(s) CSS adicional(es) del editor de bloques de WordPress a los bloques en los que esté la imagen que se resiste a pegarse al fondo hasta que des con el bloque cuyo relleno estaba fastidiando.

En mi caso, el este ejemplo real de mi web personal, era el padding inferior del bloque de fondo, pero igual en tu caso no das con el bloque maldito a la primera y resulta que es el de columnas o el de grupo u otro el que está dando por saco, así que no te rindas si no aciertas a la primera (truco, para tardar menos puedes probar usando el inspector de código del navegador y aplicar el CSS sobre los distintos elementos a ver qué pasa).

Lo importante es que, cuando añadas la nueva clase CSS a un bloque compruebes si se ha resuelto el problema, y ha desaparecido el puñetero padding inferior.

Ya ¿no?

Cualquier duda me preguntas abajo, en los comentarios, y que no me entere yo que le pides a la IA estas cosas, sino ¿para qué escribo yo en el blog?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!