Foros del Web » Creando para Internet » CSS »

No me funciona margin_top

Estas en el tema de No me funciona margin_top en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/05/2021, 10:09
 
Fecha de Ingreso: octubre-2007
Mensajes: 90
Antigüedad: 13 años, 7 meses
Puntos: 1
No me funciona margin_top

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
  #2 (permalink)  
Antiguo 20/05/2021, 15:17
Avatar de Daniel Ulczyk
Super Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.254
Antigüedad: 16 años, 3 meses
Puntos: 2111
Respuesta: No me funciona margin_top

Hay que agregar un display:flex; a MAIN

Código CSS:
Ver original
  1. main {
  2.     margin-top: 20px;
  3.     display:flex;
  4.     }

Te adjunto una captura:



__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)



La zona horaria es GMT -6. Ahora son las 12:06.