Alguien que me ayude con el css por favor...

Publicado en 'Programación' por harryxd, 5 Set 2016.





  1. harryxd

    harryxd Miembro frecuente

    Registro:
    21 Oct 2014
    Mensajes:
    117
    Likes:
    8




    Lo que quiero es que los article que están de color amarillo o mostaza tengan un 10px de margin en sus cuatro lados, como pueden ver el segundo article si tiene 10px en sus cuatro lados pero el primero solo tiene en 3 y le faltaría en la parte de arriba, ya probé con margin-top pero nada. Espero su ayuda gracias.

    [​IMG]

    Tengo este código html

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <title>Titulo de la web</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="estilos.css">
    </head>
    <body>
    <header>
    <h1>Marca</h1>
    </header>

    <section>
    <article></article>
    <article></article>
    </section>

    <footer>
    Copyright © 2016 | Marca
    </footer>
    </body>
    </html>

    y este codigo css

    *{
    margin: 0;
    padding: 0;
    font-family: verdana;
    color: maroon;
    }

    body{
    width: 100%;
    background: maroon;
    }

    header{
    width: 70%;
    height: 40px;
    background: white;
    margin: 10px auto;
    border-radius: 5px;
    }

    section{
    width: 70%;
    height: 800px;
    background: white;
    margin: 0 auto;
    border-radius: 5px;
    }

    footer{
    width: 70%;
    height: 40px;
    background: white;
    margin: 10px auto;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    article{
    width: 30%;
    height: 30%;
    background: orange;
    margin: 10px;
    }
     


  2. G_Pisfato

    G_Pisfato Miembro maestro

    Registro:
    15 Nov 2015
    Mensajes:
    442
    Likes:
    49
    En realidad sí está aplicando 10 píxeles en el margen superior, pero está trasladándose con su contenedor padre -prueba aumentando los márgenes de 'article', por ejemplo a 50px-.
    'Section' tiene la propiedad overflow en visible (de manera predeterminada), podrías poner overflow: hidden|auto para que arregles ese defecto.
    No podría explicar el comportamiento, busca referencias.
     
  3. n00b

    n00b Miembro frecuente

    Registro:
    12 Dic 2015
    Mensajes:
    139
    Likes:
    50
    section{
    width: 70%;
    height: 800px;
    background: white;
    margin: 0 auto;
    border-radius: 5px;
    overflow: hidden;
    }
     
Etiquetas: