All geek questions in one place

Why is margin-top applied to the contained element here?

I am sure that this has been asked many times, but I could not understand what to look for.

I have the following HTML and CSS ( see jsfiddle for a live example ):

<!--HTML-->
<body>
    <div id="container">
        <div id="header">
            <ul>
                <li>Item1</li>
                <li>Item2</li>
            </ul>
        </div>
    </div>
</body>



/* CSS */
#container {
    background-color: red;
    width: 400px;
    height: 200px;
    margin: auto;
}

#header ul {
    list-style: none;
    margin-top: 20px; /* I want this to be the margin at the top of the ul, not the container */
}

#header li {
    float: left;
    margin-right: 10px;
}

The problem I encountered is related to margin-top <ul>. He adds space above #container <div>, not above <ul>. I need to miss something fundamental in CSS because I just don't get this behavior. Can someone enlighten me please?

+3
source share
2 answers

- , , , . , .

+4

. , CSS reset , .

http://meyerweb.com/eric/tools/css/reset/

+1

Source: https://habr.com/ru/post/1772529/

More articles:


All Articles