Buenas! Alguien me podría explicar por que se genera este espacio entre mi header y mi main? ninguno de esos dos elementos los tengo con ...

Leonardo Esteban Omeara Garzon

Pregunta

student•hace 4 años

Buenas!

Alguien me podría explicar por que se genera este espacio entre mi header y mi main? ninguno de esos dos elementos los tengo con bordes para que se cree ese espacio y no entiendo por que sale.

Muchas gracias.

Hmtl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Layout</title>
</head>
<body>
    <header>
        <figure class="img-container">
            <img src="./img/logo.png" alt="">
        </figure>
        <nav class="navigation-bar">
            <ul class="nav-items">
                <li>Home</li>
                <li>Cursos</li>
                <li>Instructores</li>
                <li>Blog</li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="announcements">
            
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </section>
        <section class="content">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita voluptatem velit nobis sint. Ipsa soluta corporis praesentium doloremque aliquid consectetur magnam dolores distinctio quas, nihil molestias culpa quod similique debitis?</p>
        </section>
    </main>
    <footer class="footer">
        <div class="company-name">
            <p>Company</p>
        </div>
        <div class="social-net">
            <img class="icon" src="./img/fb.png" alt="">
            <img class="icon" src="./img/linkedin.png" alt="">
            <img class="icon" src="./img/git.png" alt="">
        </div>
    </footer>
    
</body>
</html>

Css

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

header{
    height: 80px;
    width: 100vw;
    background-color: coral;
    display: inline-block;
}

.navigation-bar, .nav-items, .img-container, .announcements, .nav-items li{
    display: inline-block;
}

.nav-items li{
    margin: 0 13px;
}

.img-container{
    width: 10%;
    height: 100%;
    margin: 0px;

}

img{
    width: 80px;
    height: 80px;
}

.navigation-bar{
    position: absolute;
    left: 71%;
    top: 5%;
}

main{
    height: 100vh;
    position: relative;
}

.box{
    width: 85%;
    height: 21.2%;
    background-color: #a283ec;
    margin: 20px auto;
    border-radius: 10px;

}

.announcements{
    height: 100vh;
    width: 230px;
    background-color: #673ab7fc;
}

.content{
    background-color: chocolate;
    height: 100vh;
    position: absolute;
    display: inline;
    padding: 20px 0 0 15px;
}

.footer{
    position:relative;
    height: 40px;
    background-color: rosybrown;
}

.company-name{
    display: inline-block;    
}

.social-net{
    position: absolute;
    right: 0;
    display: inline-block;
}

.icon{
    width: 35px;
    height: 35px;
    margin: 0 0 0 5px;
}

Leonardo Esteban Omeara Garzon

student•hace 4 años

@esquinazi Muchas gracias, muy clara tu explicación.

Daniel Alberto Esquinazi

student•hace 4 años

Para lograr lo que estas buscando sin hacer grandes cambios yo cambiaria los

height

de algunos selectores a algo como esto.

header {
 height: 10vh;
}
main: {
  height: 80vh;
}
.announcements{
  height: 100%;
}
.content{
  height: 100%;
}
footer {
  height: 10vh;
}

Lo bueno de hacerlo asi es que no vas a tener la barra de scroll ya que la suma del height del header(10)+main(80)+footer(10) = 100.

y no necesitas poner en .announcements y en .content el mismo valor que en

main

, utilizando

height:100%

ya van a tomar el 100% del height del padre que seria

main

Daniel Alberto Esquinazi

student•hace 4 años

Es por el display que tiene el selector de etiqueta

header

header {
    height: 80px;
    width: 100vw;
    background-color: coral;
    display: inline-block;
}

usando

display: block

se arregla

Buenas! Alguien me podría explicar por que se genera este espacio entre mi header y mi main? ninguno de esos dos elementos los tengo con ...

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]