No me funciona margin_top

kike2lucas · #1 (**permalink**) 19/05/2021, 10:09

Hola todos. Estoy maquetando una web y no me funciona el margin-top en el footer. He visto por ahí algo de asignar overflow: hidden al elemento padre, pero en este caso el padre es el body, con lo cual se me desconfigura todo

Código HTML:

<body>
    <header>
        <div id="logo">Logo</div>
        
        <div class="redes">
            <ul>
                <li><a href="#"><img src="images/icon.png"></a></li>
                <li><a href="#"><img src="images/icon.png"></a></li>
                <li><a href="#"><img src="images/icon.png"></a></li>
            </ul>
        </div>
    </header>

    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Latest news</a></li>
            <li><a href="#">Extra content</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

    <!-- Sección central-->
    <section>
        <div class="cuadro"><a href="#">Section 1</a></div>
        <div class="cuadro"><a href="#">Section 2</a></div>
        <div class="cuadro"><a href="#">Section 3</a></div>
    </section>


    <!-- Sección principal-->
    <main>
        <div class="publicidad">Espacio para publicidad</div> 
        
        <div class="maininfo">
            <h1>Main content</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ex lorem, facilisis ac velit ac, mattis condimentum odio. 
                Phasellus mattis porta elit, nec posuere erat blandit eu. Aliquam efficitur ex ut felis vestibulum, ut mattis mauris efficitur. 
                Curabitur eu elit euismod, sodales sem sit amet, feugiat ex. Nam cursus quam in ex lobortis, maximus consequat nulla tincidunt. 
                Duis nec dui eu est lacinia vestibulum. Suspendisse potenti. Vivamus luctus vulputate mauris in egestas. 
                Curabitur sit amet efficitur arcu. Aliquam erat volutpat.</p>
            <p>Vestibulum porttitor purus ut libero auctor, in venenatis elit ultrices. Phasellus finibus congue est, vel gravida nulla dictum sit amet. 
                Ut ornare ex ut erat fermentum, eu consectetur libero elementum. Etiam finibus malesuada cursus. Cras nec tristique ipsum. 
                Ut gravida purus dui, ut pulvinar lectus dignissim quis. Ut nec turpis nec sapien efficitur scelerisque a nec felis. 
                Quisque sed ex non justo suscipit iaculis a id tortor. Nullam vitae dui elit. Sed sodales in sapien vel ornare. Donec mattis nibh velit, quis dapibus augue molestie non. 
                Etiam varius nunc ex, non accumsan lacus sollicitudin ut.</p>    
        </div>
        
        <div class="publicidad">
            Espacio para publicidad    
            </div>
    </main>

    <footer>
        Copyright
    </footer>

</body>
</html>

Código:

body{
    width: 1010px;
    margin: 0 auto;
    padding:0;
}

header{
    background-color: #4b4b4d;
    margin-top: 15px;
    width: 1000px;
    height: 105px;
}

#logo{
    background-color: gainsboro;
    position: absolute;
    margin-left: 25px;
    margin-top: 20px;
    width: 200px;
    height: 60px;
}

header div.redes{
    position: absolute;
    margin-left: 800px;
    margin-top: 10px;
}

header div.redes ul{
    list-style-type: none;
}

header div.redes ul li{
    display: inline;

}

nav{
    margin-top: 20px;
}

nav ul{
    list-style-type: none;
    margin-left: -40px;
   
}

nav ul li{
    display: inline-block;
    background-color: #999;
    width: 196px;
    padding-top: 5px;/*centra el texto en la caja*/
    height: 25px;/*centra el texto en la caja*/
    text-align: center;
    

}

nav ul li a{
    color: white;
    text-decoration: none;
}

section{
    margin-top: 20px;
}

section div.cuadro{
    display: inline-block;
    background-color: #999;
    margin-right: 8px;
    width: 325px;
    height: 190px;
   
}

main{
    margin-top: 20px;
    
}

.publicidad{
   background-color: #999;
   width: 175px; 
   height: 400px;
   float: left;
   padding: 10px;

}

main div.maininfo{
    background-color:#4b4b4d;
    color: white;
    width: 590px;
    float: left;
    padding: 10px;
    height: 400px;
}

footer{
    clear: both;
    display: block;
    background-color: #2727a3;
    color: white;
    padding: 5px;
    margin-top: 20px;
    border-collapse: separate;
    width: 995px;
    height: 45px;

}

¿Alguien ve el error?
Gracias de antemano

Daniel Ulczyk · #2 (**permalink**) 20/05/2021, 15:17

Hay que agregar un display:flex; a MAIN

Código CSS:

Ver originalmain {
    margin-top: 20px;
    display:flex;
    }

Te adjunto una captura: