Eliminar el espacio entre dos Div´s horizontales

poropopo · #1 (**permalink**) 10/04/2008, 07:49

Hola,

Quizá sea una cosa sencilla, pero he buscado bastante y no encuentro la manera de eliminar el espacio que deja Dreamweaver CS3 entre dos Div´s horizontales o verticales seguidos.O sea, quiero que queden unidos, tocándose.

Os agradezco un poco de luz.

Saludos

arriaka · #2 (**permalink**) 10/04/2008, 08:13

Hola poropopo

Los div por si solos no tienen ninguna separacion, a no ser que se la pongas tu. Como ejemplo aqui tienes este codigo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento sin t&iacute;tulo</title>
    <style type="text/css">
        .uno{
            width:760px;
            height:150px;
            border: 1px solid #000000;
        }
        .dos{
            width:760px;
            height:150px;
            border: 1px solid #FF0000;
        }
    </style>
</head>

<body>
	<div class="uno"></div>
    <div class="dos"></div>
</body>
</html>

Puede ser que lo que te pase sea que tengas algun parrafo, imagen, lista, o cualquier otra cosa dentro de los div que si tengan margin y/o padding. Esto es porque los navegadores, si no especificas margin o paddings, lo ponen por defecto (por eso se suele ver diferente segun en que navegador).

Fijate en que es lo que crea esos espacios y ya nos diras.

Saludos!

poropopo · #3 (**permalink**) 10/04/2008, 08:48

Es verdad, Arriaka, funciona pero si le quito el párrafo con párrafo,el h1, o lo que sea .e: <p> texto </p>,

pero la pregunta es..¿Y entonces como escribo en el Div si no utilizo el p o los h?

Gracias.

arriaka · #4 (**permalink**) 10/04/2008, 10:05

Bueno, podrias escribir directamente en el div, aunque no seria muy correcto.

Lo que yo suelo hacer es definir los espacios de <p>, poner margin: 0px y poner padding solo en botton. Es decir:

Código:

p {
	margin: 0px;
	padding: 0px 0px 8px 0px;
}

Normalmente 8 suele ser un tamaño bueno. Puedes probar y a ver que te parece.

Lo mismo seria con los h1, h2, .... Es cuestion de probar a ver donde le puedes meter espacios.

Y si en el primer div quieres que el ultimo <p> no tenga padding-botton (o donde sea), haces un class para ello:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento sin t&iacute;tulo</title>
    <style type="text/css">
        .uno{
            width:760px;
            height:150px;
            border: 1px solid #000000;
        }
        .dos{
            width:760px;
            height:150px;
            border: 1px solid #FF0000;
        }
        p{
            margin: 0px;
            padding: 0px 0px 8px 0px;
        }
        p.ultimo{
            padding: 0px;
        }
    </style>
</head>

<body>
	<div class="uno">
		<h1></h1>
		<p>Bla bla bla</p>
		<p class="ultimo">Ultimo parrafo sin padding inferior</p>
	</div>
	<div class="dos">
		<p>Bla bla bla</p>
		<p>Bla bla bla</p>
	</div>
</body>
</html>

Espero que con esto te vaya bien!

Saludos

poropopo · #5 (**permalink**) 10/04/2008, 12:02

¡¡Fantástico! Muchas gracias.Era justo lo que quería y me lo has explicado perfecto.

Saludetes.