[html5+css] problem z marginesami [div < header]

Wszystko o HTML, XHTML, XML, CSS.
reallygrid
Posty: 3
Rejestracja: 23 lut 2015, 21:10:54
Płeć: Niewybrana
User Agent: Firefox Windows

[html5+css] problem z marginesami [div < header]

Post autor: reallygrid »

Cześć robię stronę w html5 i mam problem gdyż nie widzę marginesów górnego i dolnego dla bloku header wewnątrz diva. Oto kod (okrojony do body):

Kod: Zaznacz cały

<body>
    <div id="www">
        <header id="wwwHeader">
            <h1 id="wwwHeaderTitle">Strona główna</h1>
        </header>
    </div>
</body> 
Plik stylów:

Kod: Zaznacz cały

header, nav, main, footer, section, article, aside
{
    display: block;
}

html, body, h1, h2, h3, h4, h5, h6, ul, li, a, p, header, nav, main, footer, section, article, aside
{
    margin: 0px;
    padding: 0px;
}

/********************************************************************/

div#www
{
    margin: 15px auto; /* 15px od krawedzi okna przegladarki z gory i dolu,  wysrodkowany*/
    width: 80%;
    min-width: 640px;
    max-width: 1280px;
    background-color: rgba(200,200,255,0.5);
    border-radius: 14px;
    -webkit-box-shadow: 2px 2px 8px 1px black;
    -moz-box-shadow: 2px 2px 8px 1px black;
    box-shadow: 2px 2px 8px 1px black;
}

header#wwwHeader
{
    margin: 10px; /* widze tylko lewy i prawy a ustalone jest ze kazdy */
    height: 200px; /* ustalam na sztywno szerokosc bo bedzie tu tlo obrazkowe o okreslonej szerokosci */
    background-color: rgba(200,200,200,0.9);
    border-radius: 8px;
    -webkit-box-shadow: 2px 2px 7px 1px black;
    -moz-box-shadow: 2px 2px 7px 1px black;
    box-shadow: 2px 2px 7px 1px black;
} 
A wynik mam taki jak poniżej. Oczywiście, mogę zadziałać używając właściwości padding w DIVie ale interesuje mnie dlaczego marginesy nie chcą działać. Wolałbym rozwiązanie na marginesach. Widzę jedynie marginesy lewy i prawy:
google dysk
ODPOWIEDZ