Redimensionar el blog -3 parte- Padding

A veces nos preguntamos porqué una columna se cae si la suma de las medidas que conocemos no alcanza el total de lo que mide la zona útil del blog o porqué una imagen no cabe en una entrada o en un widget.

Esto suele suceder porqué no tenemos en cuenta otras cosas como los márgenes que hay entre las distintas partes de un blog, o las líneas que pueden enmarcar algunos de estos contenedores.

Como explico en esta entrada, un blog se compone de varias capas. La primera de estas capas, encima del fondo general, es el outer-wrapper o content-wrapper, dependiendo de la plantilla, (en algunas incluso los verás los dos).

La palabra wrapper se traduce por contenedor, así el outer-wrapper define la zona que contiene las dos columnas básicas del blog, #main-wrapper y #sidebar-wrapper y tiene una medida definida ya sea en píxels exactos, ya sea en %.

Pero, a su vez, estas dos columnas son tambien contenedores.
La primera contiene el widget de las entradas, (.main .widget), que a su vez contendrá las entradas con sus títulos y el pie de las mismas, (.post), que contendrá lo que escribas, (.post-body).
La segunda contiene la sidebar, (.sidebar), que contendrá los gadgets, (.sidebar .widget), que contendrán lo que añadas en ellos.

Si queremos separar el contenido de las columnas de su contenedor usaremos la definición padding, aplicándola al lugar que queramos ver separado.

Para que quede más claro, vamos a hacer un ejercicio práctico.

Para empezar, con sus medidas originales, pondré distintos colores de fondos a todos los elementos que se superponen en una plantilla mínima, para poderlos diferenciar y apreciar lo que voy a demostrar.
Le aplicaré, empezando por la capa que está más abajo y subiendo, gris a #outer-wrapper, amarillo a #main-wrapper y a #sidebar-wrapper, verde a .main .widget y a .sidebar, blanco a .post y a .sidebar .widget y azul a .post-body.
Este es el resultado:

Como puedes ver, las columnas tan solo están separadas por los extremos y entre si, mientras que todo el contenido de cada capa de cada una de ellas, ocupa todo el espacio de que dispone a lo ancho. Las distancias entre widgets que ves por arriba y abajo, vienen dadas por los márgenes que el codigo le ha aplicado.

¿Cual es la distancia entre columnas y cuanto mide cada una?
Pues si a 660 de ancho total, le restamos 410 que mide main + 220 que mide sidebar, nos dará 30 pixels. Esta es la distancia entre ambas columnas.
No le he sumado los 1o pixels de los laterales exteriores ya que están incluidos en las medidas de cada columna, lo que significa que cada columna tiene 10 pixels menos de superficie util.

Esto significa que la zona de que se dispone en una entrada es de 400 píxels, no de los 410 que nos dicen en #main-wrapper, con lo que cualquier imagen superior a estos 400, o se verá cortada o sobresaldrá por la derecha.
Si sucede ésto último, la sidebar se verá empujada y, al no disponer de suficiente espacio irá a colocarse bajo las entradas.
A su vez significa que en la sidebar disponemos tan solo de 210 pixels, no de los 220 que se indica en #sidebar-wrapper.

Pero estas medidas son válidas sin enmarcar nada.
Si enmarco los distintos contenidos el resultado es éste.

Y, aunque los bordes de la derecha se van desplazando hacia el centro del blog, no todos lo hacen, con lo que a buen seguro ya dispondría de menos pixels en la zona de las entradas.

Y todavía no he separado los distintos contenedores entre si.

Otro detalle que puedes apreciar en esta imagen, es que la fecha de las entradas no forma parte del cuerpo de las mismas.
Esto es así porqué la fecha solo sale en la primera entrada que se vea de las publicadas en el mismo día.
Si te fijas en la imagen anterior, verás que entre las dos entradas que se muestran no hay fecha, ya que ambas las publiqué a la vez.

Sigamos.
Voy a ir separando los elementos de sus contenedores y lo haré de dentro hacia afuera para que puedas ver a qué me refiero.
Usaré el padding para hacerlo, dándole 10 pixels por todos lados en cada fase.

Así que iré añadiendo esta línea padding: 10px; a cada lugar.
Primero a .post-body para separar las letras del borde.

Efectivamente, las letras de la entrada se han separado del borde, pero no lo han hecho ni la entrada en sí ni el título, ni lo que hay al pie de la misma.
Al mismo tiempo esto significa que la superficie útil de la entrada es 20 píxels inferior a la que tuviera.

Sigamos. Ahora le daré la misma separación a .post y a .sidebar .widget y este es el resultado:
Como puedes comprobar, se ha separado el contenido de los widgets y la entrada, su título y lo que hay al pie.

Al darle una distancia total también se han separado por arriba y por abajo.
Esto se soluciona diéndole que lo haga solo por un lado o expresando en la misma línea todas las distancias.

En el primer caso pondremos, por ejemplo, padding-$startSide para separarlo solo por la izquierda, o padding: 0 10px 0 10px; indicándole que le de 0 por arriba, 10 por un lado, 0 por abajo y 10 por el otro. De esta forma podemos controlar exactamente los 4 lados de un espacio.

¡Bien! Sigamos separando. Lo siguiente será separar los widgets de los laterales de sus contenedores.
Para ello añadiré la linea de padding a .main .widget y a .sidebar y esto es lo que se ve.

Puedes notar que en este caso, además de separase el cuerpo de la entrada, también la fecha se ha separado del borde.

Por último separaré las columnas del contenedor general, así que añadiré una línea de padding a
#main-wrapper y a #sidebar-wrapper  ¿Que ha pasado aquí?

Sencillamente, que ya no había más espacio.
Este último padding, en el contenedor principal de cada columna, en lugar de encoger el contenido lo que ha hecho ha sido expandir las columnas y si a ésto le sumas los bordes el resultado es éste.

Voy a ir aumentado el ancho total de #outer-wrapper, a ver cuantos píxels necesitaría para que ambas se vean en su sitio.

Sumándole 18 pixels he conseguido que se vean así, pero no olvidemos que al principio teníamos 30 pixels de distancia entre ellas.

¿Serán los marcos los culpables? Voy a quitarlos.

Ya ves, hemos ganado algunos píxels, exactamente 8, pero siguen faltándonos 10 de los 18 que le he añadido más los 30 que teníamos al principio. O sea, los 10 pixels del último padding añadido multplicado por 4 laterales, (2 en cada columna).

Para que puedas ver mejor cual de las distintas separaciones ha sido la culpable, he hecho un montaje con todos los pasos dados hasta ahora.

Podrás apreciar, en principo, que las primeras separaciones apenas han afectado a las medidas iniciales. Tan solo los bordes, que por la zona más exterior de ambas columnas se han mantenido dentro de los 10 pixels de distancia que les marca el #outer-wrapper, se han "comido" parte de los 30 pixels de distancia interna.
En este detalle del interior podrás apreciarlo mejor.

Estos han sido los píxels que he recuperado al quitar los bordes, pero me seguian haciendo falta los del último padding, que ha provocado que las columnas se expandieran hacia el centro.

A todo esto quizá te quede una duda: Si .sidebar .widgets controla todos los widgets, ¿se puede controlar un solo widget?

Vamos a verlo.
Con la plantilla en su código básico, voy a enmarcar solo .sidebar .widget y a enmarcar también un widget concreto, por ejemplo las Eiquetas, con un color distinto.

Y como puedes comprobar, no hay un doble borde en el gadget de las etiquetas.
Tan solo ha salido el borde del color que le he indicado, dominando su código particular al general.