What is margin in CSS?

Question

I assumed margin is the space between parent element and itself since long time ago. But I think it is not true. Please check below short HTML with CSS.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box Model</title>
<style type="text/css">
    body {
    background-color: #ccc;
    }
    header {
        text-align: center;
        text-decoration: underline;
        font-weight: bold;
    }
    #container {
        background-color: grey;
        width : 400px;
        height : 400px;
    }
    #container .box {
        background-color: slategrey;
        width : 200px;
        height : 200px; 
        color : #fff;   
        border: 5px solid navy;
        margin-top: 50px;
        margin-left:50px;
        padding-top:20px;
        padding-left:20px;
    }
</style>
</head>
<body>
    <header>Box Model Example</header>
    <section>
        <div id="container">
            <div class="box">Content</div>
        </div>
    </section>
</body>
</html>

You will see the output as below screenshoot.

My margin-top:50px; is not the space between parent elment container and element box. How could I add the space(from above) between these two elements ?

score 6 · Accepted Answer · edited May 23 '17 at 11:59

6

You're not wrong about what margin is. I think your actual question is "why does margin-top not work here?".

If I'm not mistaken, this is a case of collapsing margins: under certain circumstances, vertical margins of two elements will combine. (Note how there is top margin in your example, it's just all on the outer box.)

You can try one of the solutions mentioned over there (for instance, floating the inner box), or add padding to the outer box instead.

edited May 23 '17 at 11:59

Community

1
1

answered Apr 12 '16 at 11:26

vvye

1,208
1
10
25

Thank you sir ! As you described my actual question is "Why does `margin-top` is not work here". Your suggested link is the solution for my problem and my question seems duplicated with it. – Cataclysm Apr 12 '16 at 11:34

Farhad · Answer 2 · 2016-04-12T16:59:56.383

your code is correct.

but you need add these lines to your #container & #container .box classes.

display:inline-block;
position:relative;

learn more about display & position in: http://www.w3schools.com

your final code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box Model</title>
<style type="text/css">
    body {
    background-color: #ccc;
    }
    header {
        text-align: center;
        text-decoration: underline;
        font-weight: bold;
    }
    #container {
        background-color: grey;
        width : 400px;
        height : 400px;
        display:inline-block;
        position:relative;
    }
    #container .box {
        background-color: slategrey;
        width : 200px;
        height : 200px; 
        display:inline-block;
        position:relative;
        color : #fff;   
        border: 5px solid navy;
        margin-top:50px;
        margin-left:50px;
        padding-top:20px;
        padding-left:20px;
    }
</style>
</head>
<body>
    <header>Box Model Example</header>
    <section>
        <div id="container">
            <div class="box">Content</div>
        </div>
    </section>
</body>
</html>

score -2 · Answer 3 · answered Apr 12 '16 at 11:34

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Box Model</title>
<style type="text/css">
 #container:before, #container:after{content:''; display:table;}
 #container:after{clear:both}
 #container{zoom:1;}
    body {
    background-color: #ccc;
    }
    header {
        text-align: center;
        text-decoration: underline;
        font-weight: bold;
    }
    #container {
        background-color: grey;
        width : 400px;
        height : 400px;
    }
    #container .box {
        background-color: slategrey;
        width : 200px;
        height : 200px; 
        color : #fff;   
        border: 5px solid navy;
        margin-top: 50px;
        margin-left:50px;
        padding-top:20px;
        padding-left:20px;
    }
</style>
</head>
<body>
    <header>Box Model Example</header>
    <section>
        <div id="container">
            <div class="box">Content</div>
        </div>
    </section>
</body>
</html>

score -3 · Answer 4 · edited Apr 12 '16 at 11:28

-3

Add padding-top to your #container:

#container { padding-top: 50px;}

edited Apr 12 '16 at 11:28

Roman

3,563
5
48
104

answered Apr 12 '16 at 11:24

Vishit

23
11

You can explain your answer. However, this don't solve the problem – Marcos Pérez Gude Apr 12 '16 at 11:26
you wanted to margin between container and container box ? – Vishit Apr 12 '16 at 11:29

What is margin in CSS?

4 Answers4