Eliminar espacios en blanco

[aclaucio]

Hola, estoy realizando un diseño y tengo una duda sobre como eliminar los espacios en blanco que quedan entre el header y el section y entre los sections. También como posicionar el nav más arriba. Cualquier otra crítica constructiva será bienvenida.
Estoy utilizando boilerplate.

Código HTML:

<header>
        <section id="Logo">
            <p>Logo</p>            
        </section>
 
        <nav>
            <ul>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
            </ul>
        </nav>
 
    </header>
 
    <section id ="Section1">    
        <p>Section1</p>    
    </section>
 
    <section id ="Section2">
        <article>
            <p>Article</p>
        </article>
        <article>
            <p>Article</p>
        </article>
        <article>
            <p>Article</p>
        </article> 
    </section>
 
    <section id = "Section3">
        <article>
            <h3>Article</h3>
        </article>
        <article>
            <h3>Article</h3>
        </article>
    </section>
 
    <section id="Section4">
        <p>Section4</p>
    </section>
 
    <footer>
        <p>Footer</p>
    </footer>
 

Código CSS:

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
 
header{
    background: #B39E00;
    height: 8em;
}
 
#Logo{
    background: #9BB300;
    display: inline-block;
    width: 15%;
}
 
nav{
    background: #6EB300;
    margin-left: 20%;
    width: 75%;
}
 
nav li{
    display: inline-block;
    margin-left: 15%;    
}
 
#Section1{    
    background: #2AA2C0;
    height: 20em;
}
 
article{
    background: #15B300;
    display: inline-block;
    margin-left: 20%;
    margin-top: 2em;
}
 
#Section2{    
    background: #922F20;
    display: block;
    height: 15em;
}
#Section3{
    background: #C0C02A;
    display: block;
    height:15em;    
}
 
#Section4{
    background: #C5DC60;
    display: block;    
    height: 15em;
}
 
footer{
    background: #748E1F;
    display: block;
    height: 4em;
}
 

Descarga del Diseño completo:

[URL=http://depositfiles.com/files/oevwn8eyq]http://depositfiles.com/files/oevwn8eyq[/URL]

[Naahuel]

Usá reset.css o normalize.css. Estas son hojas de estilo que eliminan los estilos por defecto del navegador y te dan una base de dónde partir. Esos espacios en blanco que ves son márgenes y paddings que el navegador aplica.

La diferencia entre reset.css y normalize.css es que el primero "resetea" todos los estilos. El segundo es más efectivo y moderno, pues lo que hace es aprovechar algunos estilos del navegador y normalizarlos para que se vean igual en todos lados.

[pablolombardo]

Hola aclaucio,

Boilerplate viene con normalize.css incluido en su última versión.

Las etiquetas <p> tienen por defecto un margin. Y la etiqueta <section> no crece por default.

Ese espacio en blanco que ves es el margen de la etiqueta <p>

Podés o sacarle los margenes a <p>

Código:

p {
margin: 0;
}

O hacer que crezcan automáticamente los <section>

Código:

section {
overflow: auto;
}

Saludoss.

[aclaucio]

Gracias, me sirvió de mucho. La solución del overflow me parece más eficiente.

[pablolombardo]

Genial, me alegro que te halla servido.

Y si, sacarles los márgenes a los párrafos no tiene sentido. Estoy de acuerdo.

Saludoss.