Reducir espacio entre los gadgets

Cómo reducir el espacio que queda entre los gadgets (sobre todo al poner el título a algo).

Fíjate como en el ejemplo de arriba hay más espacio entre los títulos y sus respectivos gadgets:

1

Eso sí, antes de nada, tienes que aprender dónde mirar el nombre de vuestros gadgets (ID se llama)

Es muy fácil.

Cuando estamos en Diseño, tenemos que pasar por encima de donde dice Editar del gadget en sí. 

Abajo a la izquierda saldrá una línea informativa y se cargará en dos pasos. Pimero un poco, y luego el resto. Hay que dejar que se cargue por completo o no lo veremos.

Este es el primer paso:

Y este el segundo:

Fíjate que se llama Image5:

Si es un gadget Imagen, como en este caso, siempre será Image y un número. 

Y ahora, teniendo esto claro, empezamos.

Como reducir el espacio entre los gadgets

Paso 1. Pensar qué gadgets queremos juntar.

Es decir, esto que vamos a ver se hace uno a uno, juntando un gadget al gadget de justo debajo. Va a ser un código detrás de otro.

Digamos que el código que ponemos arriba del todo es Image 5, bueno, pues nos juntará ese al siguiente. Y así.

Entonces esta es mi columna de gadgets 

Pero no quiero juntar todo

Quiero:

a) Juntar Buscar a su cuadrito de búsqueda.

b) Dejar espacio entre el cuadrito y Suscríbete.

c) Juntar Suscríbete a su cuadrito para poner el email.

Paso 2. Vamos a añadir CSS

Y el código que necesitamos será:

#Image5{
margin-bottom: -20px !important;
}

Piensa que donde dice Image5 tendrá que ir cada vez el código del gadget de arriba, es decir, el que queremos juntar al siguiente.

Y que el -20 lo podemos cambiar por lo que quieras. Son los píxeles que de espacio que dejamos.

Como es un número negativo, un -5 dejará bastante espacio y un -50 lo juntará muchísimo.

De todos modos -20 es una medida que más o menos quedará bien.

Entonces, con ese código he juntado mi primer gadget (Image5 – Imagen Buscar) al siguiente (su cuadrito de búsqueda)

Doy un par de intros, y pongo:

#Image3{
margin-bottom: -20px !important;
}

¿Por qué? Porque Image3 es el gadget Imagen con la imagen de Sucríbete, y ya hemos visto antes en el paso  c)  que no quería espacio entre el cuadrito de búsqueda y el siguiente…

Y así uno a uno. 

Poniendo esos dos códigos en la caja de Añadir CSS, consigo esto:

Además esto, por supuesto, lo puedes hacer con todos los gadgets que quieras y no sólo de la columna. 

En este caso, los dos (tanto la presentación como la barra), ya sabes que son gadgets HTML, así que su ID será HTML y un número...

Siempre el ID será aquello de lo que sea el gadget y luego su número correspondiente 

Fuente: Personalizaciondeblogs