margin-top moving along with the #section div?

Question

I'm trying to move the class .column below 50px, but margin-top: 50px moving along with the #section. Why is that and how it can be fixed?

*{ padding:0; margin:0; }

body { width:100%; font-family:"Source Sans Pro" }
#section { height:400px; background-color:#383838; color:White; }
span { font-size:40px; }
.column { width: 300px; border: 2px solid yellow; margin-left:40px; margin-top:50px; }

<html>
<head>
    <title>Breadth</title>
    <link rel="Stylesheet" type="text/css" href="breadth.css" />
    <link href="fonts.css" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
</head>
<body>
    <div id="main">
        <div id="section">
            <div class="column">
                <span class="icon icon-cogs"></span>
                <h2>Maecenas lectus sapien</h2>
                <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
            </div>
        </div>
    </div>
</body>
</html>

Mohammad Usman · Accepted Answer · 2016-05-17T07:55:05.477

You can apply padding-top: 50px to #section rather than margin-top to .column

Referring from Mozilla Documentation:

If there is no border, padding, inline content, or clearance to separate the margin-top of a block from the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

Read about Margin Collapsing for more details.

*{ padding:0; margin:0; }

body{ width:100%; font-family:"Source Sans Pro" }
#section{height:400px; background-color:#383838; color:White; padding-top: 50px; }
span{  font-size:40px; }
.column{ width: 300px; border: 2px solid yellow; margin-left:40px;}

<html>
<head>
    <title>Breadth</title>
    <link rel="Stylesheet" type="text/css" href="breadth.css" />
    <link href="fonts.css" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
</head>
<body>
    <div id="main">
        <div id="section">
            <div class="column">
                <span class="icon icon-cogs"></span>
                <h2>Maecenas lectus sapien</h2>
                <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
            </div>
        </div>
    </div>
</body>
</html>

I've shared a link plz read it, its bcz of collapsing margins — Mohammad Usman, May 17 '16 at 07:50
@Sabari if you really wants to stick with `margin-top` then apply `overflow: hidden` to `#section` and it will work — Mohammad Usman, May 17 '16 at 07:52

score 1 · Answer 2 · edited May 23 '17 at 12:31

If you want to use margin-top then give display:block to parent div and display:inline-block to child div.

See here

Fore more info read here

Edited CSS

*{ padding:0; margin:0; }

body{ width:100%; font-family:"Source Sans Pro" }
#section{height:400px; background-color:#383838; color:White;display:block; }
span{  font-size:40px; }
.column{ width: 300px; border: 2px solid yellow; margin-left:40px;  margin-top:50px;display:inline-block;}

score 1 · Answer 3 · edited May 23 '17 at 12:31

You should use padding-top for #section like in the fiddle and remove margin-top from child. Since margins will collapse to each other, it's better not to use it for positioning elements. refer this: Margin goes outside div when border is removed

#section {
   padding-top: 40px;
   ...
}

Another approach is use the same code but add overflow:auto to #section like this:

#section {
   overflow:auto;
   ...
}

There's another solutions too like using border on parent, but these are more like hacks since we used margins for positioning.

*{ padding:0; margin:0; }

body { width:100%; font-family:"Source Sans Pro" }
#section { height:400px; background-color:#383838; color:White; padding-top:50px;}
span { font-size:40px; }
.column { width: 300px; border: 2px solid yellow; margin-left:40px;  }

<html>
<head>
    <title>Breadth</title>
    <link rel="Stylesheet" type="text/css" href="breadth.css" />
    <link href="fonts.css" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
</head>
<body>
    <div id="main">
        <div id="section">
            <div class="column">
                <span class="icon icon-cogs"></span>
                <h2>Maecenas lectus sapien</h2>
                <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Pellentesque viverra vulputate enim. Aliquam erat volutpat.</p>
            </div>
        </div>
    </div>
</body>
</html>

margin-top moving along with the #section div?

3 Answers3