CODEWITHSUNDEEP
htmlcss
Peter
Peter

Reputation: 419

Border of outer element affects how margin of inner element is displayed, why?

I think I got it just partly, now I have another problem I don't understand. I've got a div with id="signin" that is inside other 2 divs. Those 2 divs don't have any padding or border, and when I apply margin-top to the div with id="signin" now it doesn't create any white space above. Why is it? Can the div next to the div with id="signin" be affecting it in any way?

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Test</title>
    <style type="text/css">
        body {margin: 0px;}

        #top-bar {
            background-color: #690203;
            height: 40px;

        }

        .fixed-width {
            width: 950px;
            margin: auto;
        }

        #logo {
            float: left;
        }

        #logo img {
            border-right: 2px solid #752124;
            padding: 9px;
        }
        
        #signin {
            float: left;
            width: 200px;
            margin-left: 15px;
            margin-top: 10px;
            border: 1px solid deepskyblue;
        }
    </style>
</head>
<body>
    <div id="top-bar">
        <div class="fixed-width">
            <div id="logo">
                <img src="images/logo.png" width="20">
            </div>
            <div id="signin">
                <!--<img src="images/signin.png" width="13">-->
                <span>test test</span>
            </div>
        </div>
    </div>
</body>
</html>

I've started learning css recently and came across a problem I can't understand. I've got one div nested inside another, and when the outer div has a border, then using margin with inner div results in moving the inner div within the outer div, which is how I thought it should work. However, when the outer div doesn't have any border, then using margin with the inner div results in moving the outer div as well and it creates some space above it. Please, have a look and try to explain why it's like that. Thank you.

with border in #bigger

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #bigger {
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
            border: 1px dashed black; /* border I use or don't use with the outer div */
        }

        #smaller {
            margin-top: 10px;
            width: 50px;
            height: 50px;
            background-color: deeppink;
            padding-top: 10px;
        }
    </style>
</head>
<body>
    <div id="bigger">
        <div id="smaller"></div>
    </div>

</body>
</html>

without border in #bigger

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #bigger {
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
        }

        #smaller {
            margin-top: 10px;
            width: 50px;
            height: 50px;
            background-color: deeppink;
            padding-top: 10px;
        }
    </style>
</head>
<body>
    <div id="bigger">
        <div id="smaller"></div>
    </div>

</body>
</html>

Upvotes: 3

Views: 831

Answers (1)

Blake Mann
Blake Mann

Reputation: 5490

This is caused by the fact that CSS uses collapsing margins.

That link will explain it far better than I will, so I'd recommend giving that a read, but to give you a short summary:

Margin in CSS is designed to be displayed outside of an element. This behaviour gets a bit murky when dealing with elements within other elements, as the margin can be considered outside of the child in both cases of whether it is within the parent or outside of the parent. It was determined that margin's would always seek to be outside of all parent elements as well, unless that parent had a style which prevented this logic from being true. For example, if the parent has a border, it now has something above it which separates the child from the outside world, meaning that the child's margin must belong inside of the parent. If not, there is no separation, so the child's margin ventures outward.

If you wanted to always have the margin inside of the parent, a better option might be to apply padding to the parent element, instead of margin to the child.

Upvotes: 10

Related Questions