[Ovillo] Problemas con las propiedades margin y padding en <div>

Mar Dic 2 14:12:03 UTC 2008

Hola gente,

      tengo algunos problemas con estas propiedades al anidadar divs para
darle la estructura a mi sitio. Mi idea es tener un contenedor principal
(container), que tiene un encabezado (header), el menú (nav), el contenido
del sitio (contents) y el pie (footer).  Mi problema surge, que cuando le
asigno algún color de fondo o una imágen al encabezado o al cuerpo del
sitio, noto que me queda una línea blanca entre divs (por ejemplo entre el
header y el content, y el content y el footer).
      Estuve buscando en internet, viendo el "modelo de cajas", pero
evidentemente hay algo que estoy pasando por alto o algo que entendí mal.
Probé con el paddin, el magin y me sigue pasando lo mismo, no consigo que
los divs se "unan".
      Si alguno me puede dar alguna pista de lo que estoy haciendo mal lo
agradecería mucho. Igualmente pego abajo el codigo de mi css y mi html. Si
no es muy claro lo que quiero decir podría ver la posibilidad de subir una
impresión de pantalla donde se note correctamente mi proble.
      Saludos y muchas gracias.

Silvana.

Acá va el código.

CSS:

* {
  margin:  0;
  padding: 0;
}

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-image: url(images/bgmain.jpg);
    background-color: #828282;
}

#container {
    background-color: #ffffff;
    width: 786px;
    margin: 0px auto 0px auto;
    padding: 0px;
}

#header {
    background: url(images/header.jpg) no-repeat;
    margin: 0px;
    height: 285px;
}

#nav {
    background: url(images/bgnav.jpg) no-repeat;
    height: 40px;
    padding: 20px 25px 8px 25px;
}

#nav ul {
    list-style-type: none;
}
#nav li {
    display: inline;
}

#nav .active a:visited,active {
    text-decoration: none;
    display: block;
}

#contents {
    background: url(images/bgbody.jpg) repeat-y;
    margin: 0px;
}

#maincontent {
    text-align: justify;
    margin: 0px 70px 0px 30px;
    width: 750px;
    /*padding: 0px 0px 30px 30px;*/
    padding-right: 60px;
}

#footer {
    background: url(images/bgfooter.jpg) no-repeat;
    padding-top: 10px;
    height: 43px;
}

#footer p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    text-align: center;
    left: 100px;
}

HTML:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
        <title>Titulo</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="container">

            <div id="header">
            </div>
            <!-- Fin header -->

            <div id="nav">
                <ul>
                <li class="#"><a href="index.html">Inicio</a></li>
                    <li><a href="#">Link_1</a></li>
                    <li><a href="#">Link_2</a></li>
                    <li><a href="#">Link_3</a></li>
                    <li><a href="#">Link_4</a></li>
                    <li><a href="#">Link_5</a></li>
                </ul>
            </div>
            <!-- Fin topmenu -->

            <div id="contents">
                <div id="maincontent">
                    <h1>Header 1</h1>
                    <h2>Header 2</h2>
                    <h6>Header 6 - Descripción</h6>
                    <p>
                        Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Donec placerat neque vel tortor. Duis urna. Cras
                        orci eros, rutrum porttitor, viverra sit amet,
gravida sit amet, nisl. Fusce laoreet elementum eros. Sed
                        mattis volutpat magna. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos
                        himenaeos. Nulla hendrerit orci ornare ipsum. Proin
semper sapien non libero. Sed auctor, est eget
                        volutpat sodales, nulla eros auctor tortor, et
pellentesque eros diam in odio. Etiam euismod dui eu augue.
                        Integer at lacus. Duis eleifend placerat tellus.
Cras velit. Suspendisse ut arcu.
                    </p>
                    <p>
                        Vivamus in libero. Donec elementum. Vestibulum
iaculis interdum erat. Fusce vestibulum blandit nulla.
                        Nullam fringilla lacus eu sem. Sed non magna. Morbi
ut lorem. Maecenas sem magna, iaculis mollis, placerat
                        at, euismod ut, dolor. Phasellus fringilla mi. Nam
hendrerit. Maecenas adipiscing justo ut nibh. Lorem
                        ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque gravida posuere magna. Morbi interdum nulla id
                        mauris.
                    </p>
                    <p>
                        Nam tellus. In elementum elementum nibh. Aenean
ante. Fusce viverra odio ac tortor. Pellentesque habitant
                        morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Duis magna elit, commodo sit amet,
                        lobortis nec, commodo in, magna. Cras ultrices.
Curabitur molestie sapien eget diam. In sit amet nibh. Sed
                        fringilla fringilla magna. Cras suscipit ligula
dictum urna. Praesent sit amet sem non lacus imperdiet
                        placerat. Aliquam mi orci, viverra eu, molestie sit
amet, dictum ac, turpis. Sed feugiat auctor tellus.
                        Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Morbi
                        sollicitudin sapien eu neque. Suspendisse imperdiet
euismod dui. Duis luctus nibh.
                    </p>

                </div>
                <!-- Fin maincontent -->

                <div class="clear"></div>

            </div>
            <!-- Fin contents -->

            <div id="footer">
                <p>
                    nombre | dirección | código postal
                </p>
            </div>
            <!-- Fin footer -->

        </div>
        <!-- Fin container -->
    </body>
</html>