Cómo reducir el espacio entre los links en CSS

Hola tengo una duda porque sale tanto espacio entre los links que salen en este pantallazo:


Como pueden ver es un gran espacio que hay entre esos links con el +, que puedo arreglar en el CSS de aquel codigo para arreglar ese espacio y dejarlo con menos campo

Código CSS de la opcion

spacedeejays dijo:

Hola tengo una duda porque sale tanto espacio entre los links que salen en este pantallazo:
Ver el archivo adjunto 15899

Como pueden ver es un gran espacio que hay entre esos links con el +, que puedo arreglar en el CSS de aquel codigo para arreglar ese espacio y dejarlo con menos campo

Código CSS de la opcion

Insertar CODE, HTML o PHP:

/* Spoiler */
.su-spoiler-style-1 { margin: 0 0 1.5em 0 }
.su-spoiler-style-1 > .su-spoiler-title {
	padding: 0.3em 0 0.3em 26px;
	background: 0 50% url(../images/spoiler-closed.png) no-repeat;
	cursor: pointer;
}
.su-spoiler-style-1.su-spoiler-open > .su-spoiler-title { background: 0 50% url(../images/spoiler-open.png) no-repeat }
.su-spoiler-style-1 .su-spoiler-content {
	padding: 15px 0;
	display: none;
}
.su-spoiler-style-1 .su-spoiler-style-1 { margin: 1em }
.su-spoiler-style-2 {
	margin-bottom: 1em;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
.su-spoiler-style-2 > .su-spoiler-title {
	padding: 10px 10px 10px 40px;
	background: #f0f0f0 12px 8px url(../images/spoiler-style-2.png) no-repeat;
	font-size: 14px;
	height: 14px;
	line-height: 14px;
	color: #000;
	cursor: pointer;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
.su-spoiler-style-2.su-spoiler-open > .su-spoiler-title {
	border-bottom: 1px solid #ccc;
	background: #f0f0f0 12px -92px url(../images/spoiler-style-2.png) no-repeat;
}
.su-spoiler-style-2 .su-spoiler-content {
	padding: 1em;
	display: none;
}

Hacer clic para expandir...

los que te hacen ese espacio son los padding que tenes... anda poniendo en 0 y testeando a ver cual es...

Pues así, en un análisis rápido, y sin ver el HTML, yo creo que lo que causa ese espaciamiento son los padding y el border-radius. Así como lo veo, entre cada elemento hay por lo menos 40px. Según analizo, el espacio puede ser una combinación de 10px del padding inferior de elemento superior, 10px del border inferior del elemento superior, 10px del border superior del elemento inferior, y 10px del padding superior del elemento inferior.

Yo lo que intentaría sería reducir los valores de padding en las clases su-spoiler-style-1 y su-spoiler-style-2.

Aunque sería bueno ver el HTML también.

Edit: Ups... cuando empezé a responder no estaba el post de cicklow. Me ganó

Mmm no resulto puse casi todo los padding en 0 los margin todo

Ahm... Pues a reserva de poder ver la página online... ¿Que debugger de HTML/JS/CSS usas?

Yo usaría (uso) Firebug, que es un plug-in para Firefox (también creo se pueden usar las Herramientas de Desarrollo de Chrome, que ya vienen incluidas). Con Firebug podrías localizar el elemento en cuestión y gráficamente comprobar los limites de dicho elemento, y poder ver exactamente cuanto padding,border y margin tiene el elemento. Además puedes modificar los valores en Firebug sin cambiar el archivo fuente, y localizar exactamente cual es la clase CSS (y en que archivo se encuentra) que está afectando el comportamiento del elemento.

En el navegador pon el cursor al lado del enlace y le das botón derecho- inspeccionar elemento.