De donde sale este margen???

moNTeZIon · #1 (**permalink**) 22/08/2007, 03:08

Buenos días.
Miren este codigo:

Código:

<div style="display: block; border-top: solid 1px #dddddd; border-bottom: solid 1px #dddddd;">
  <a href=""><img src="Images/FlechitaDer.gif" style="vertical-align: middle;" /> Texto Link</a>
</div>

En la página de estilos, este es el estilo para el enlace:

Código:

a:link {
  display: block;
  text-decoration: none;
  font-family: MS Sans Serif, Sans-Serif, Tahoma, Helvetica;
  font-size: 10px;
  color: #666666;
}
a:visited {
  ...
}
...

Entonces, el resultado es que salga un link dentro del DIV que tiene borde por encima y por debajo. Pero la distancia del link hasta esos bordes del DIV difiere mucho si aplico el "display: block" o si no lo aplico. De hecho he tenido que aplicarlo para reducir ese margen, pero yo no quiero que sea de tipo "block", sino "inline", pero al ponerlo "inline" de disparan esos margenes...
Por qué ocurre esto? Qué puedo hacer?
Ah! Olvidé comentar que esto lo he notado en Explorer 6.
Gracias!

PatomaS · #2 (**permalink**) 22/08/2007, 03:19

Hola

Bueno, por lo que dices, supongo que lo que quieres es un vínculo de tipo inline, como es en su valor repdeterminado y que haya poca distancia entre los elementos dentro del div y su borde.

En principio, no es complicado lo que quieres, pero debes controlar un poco los estilos en general, empieza por poner esto:

Código HTML:

* {border: 0; margin: 0; padding: 0;}

Eso eliminará todos los bordes y espacios en todos los objetos.

Después elimina display:block del div ya que es redundante.

Prueba eso y habrás avanzado en el diseño.

También recuerda usar una DTD válida en tu documento, de lo contrario, los resultados son menos predecibles.

Tras estos cambios, deberías tener un resultado satisfactorio, si no es así, describe nuevamente y en detalle tu problema.

Felicidad

moNTeZIon · #3 (**permalink**) 22/08/2007, 03:44

Hola PatomaS,
Felicidad ante todo!
Bueno, este es el DTD

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

El display: block redundante del DIV esta quitado.
El único elemento en el interior del DIV es el enlace, y ya le he agregado esto a su estilo:

Código:

border: 0; margin: 0; padding: 0;

Y la cosa sigue igual, tanto Explorer 6 como Explorer 7, muestran un margen exagerado tanto por encima del link, como por debajo.

Esto es muy facil de probar, puesto que solo es englobar un enlace dentro de un div, y aplicar el estilo del enlace. Podrán ver que ocurre esto.

Ya probé esto:

Código:

* { border: 0; margin: 0; padding: 0; }

Pero la cosa seguía igual, así que lo quité y se lo dejé solamente al estilo del enlace, pero ya comento que tampoco tengo éxito.
Gracias por las opiniones!
Saludete!

moNTeZIon · #4 (**permalink**) 22/08/2007, 03:51

De hecho, la cosa debería poder solucionarse desde el estilo del enlace. No se que cosas provocará el display: block , pero soluciona el problema.
Hay algún aspecto en los enlaces, que es modificado por el display: block. Sería cuestión de modificar solamente esa propiedad (cual será?), puesto que no quiero un tipo block, como comenté más arriba.

PatomaS · #5 (**permalink**) 22/08/2007, 05:43

Hola

Bueno, veamos. mira este ejemplo que te paso:

Código HTML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<style type="text/css">
		* {border: 0; margin: 0; padding: 0;}
		html,body { width: 100%; height: 100%; background-color: #fff; }
		#Base { width: 100%; background-color: inherit;}
		img {border: 1px solid #f00;}
	</style>
	<script type="text/javascript">
		function leerpropiedades(x) {
			alert (document.getElementById(x).style.top);
		}
	</script>
	<title>Pruebilla</title>
</head>
<body>
<div id="Base">
	<p>&nbsp;</p>
	<div style="border-top: solid 1px #ddd; border-bottom: solid 1px #ddd;">
		<a href=""><img src="http://www.forosdelweb.com/customavatars/avatar85076_1.gif" style="vertical-align: middle;" /> Texto Link</a>
	</div>	
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
</div>
</body>
</html>

Lo puedes copiar en un documento en blanco, ponerle nombre y visualizarlo, verás que la imagen, a la que le puse un borde rojo para que se vea mejor, llega justo a los bordes del div. En tu sistema debería verse exactamente igual. No lo he probado en explorer esta vez, pero debería ir bien.

Una vez hayas usado y revisado el ejemplo, juega un poco con él hasta lograr la misma situación que tienes ahora, así descubres que pasa y quien es el responsable del problema.

Felicidad

moNTeZIon · #6 (**permalink**) 23/08/2007, 04:09

De acuerdo, pero le voy a hacer algún cambio a tu code para que puedas ver el resultado de lo que estoy intentando explicar.
1 - Copia y pega tu código en un documento nuevo.
2 - Añade el siguiente CSS para los links "normales" (solo le cambio el tipo, tamaño y color de letra, como puedes ver, para conseguir un tipo más estético)

Código:

a:link {
  text-decoration: none;
  font-family: MS Sans Serif, Sans-Serif, Tahoma, Helvetica;
  font-size: 10px;
  color: #666666;
}
a:visited {
  text-decoration: none;
  font-family: MS Sans Serif, Sans-Serif, Tahoma, Helvetica;
  font-size: 10px;
  color: #666666;
}
a:hover {
  text-decoration: underline;
}

3 - Y por último, mi ejemplito concreto trataba con una imagen más pequeña que el propio link, así que al tag IMG que muestra la imagen añádele este height a su style:

Código:

... style="vertical-align: middle; height: 8px;" />

De esta forma tienes mi ejemplo tal cual está.
Ahora, para reproducir las diferencias entre un caso y otro, tanto en el estilo del enlace LINK, como en el VISITED, añádele "display: block;", y vuelve a refrescar, verás que se come un margen que estaba y que ahora no está. Yo quiero comerme ese margen, pero sin darle un "display: block" al vínculo.
A ver si ahora si...
Saludos.