Cómo reducir el espacio entre los links en CSS

  • Autor Autor spacedeejays
  • Fecha de inicio Fecha de inicio
S

spacedeejays

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola tengo una duda porque sale tanto espacio entre los links que salen en este pantallazo:
panta.webp

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;
}
 
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ó 😀
 
Última edición:
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.
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

NASA
¿Cómo reducir el margen superior en mi página web?
Respuestas
3
Visitas
32
NASA
NASA
Aguila SEO
Cómo reducir el espacio de un bloque para que esté más arriba en la página
Respuestas
3
Visitas
288
SimpleCode
S
ramonjosegn
¿Cómo reducir el número de anuncios en mi blog?
Respuestas
9
Visitas
295
ramonjosegn
ramonjosegn
B
Cómo reducir el alto de un botón en CSS
Respuestas
5
Visitas
844
Kevin Ramos
Kevin Ramos
Jeancito
  • Pregunta Pregunta
¿Cómo reducir el espacio en el footer?
Respuestas
7
Visitas
507
EspErpENto
EspErpENto
Atrás
Arriba