margin-top issue on HTML

Question

I have the following HTML

<body>
    <div class="template">
        <div class="box"></div>
   </div>
</body>

My CSS

.template{
    height:500px;
    width:1000px;
    background-color:#e1bfbe;
    margin:0 auto;
}
.box{
    height:420px;
    width:165px;
    background-color:#ffffff;
    margin-left:416px;
    margin-right:417px;
    margin-top:37px;
    margin-bottom:38px;
}

Now I get the following output

enter image description here
but when I add float:left; in .box class I get the following image

enter image description here

only margin-top is not working without float:left; Why should I add float:left to get top margin for the element .box ?

Your margin is being used on the parent element. See: http://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element — Curtis, May 14 '15 at 05:11
Sounds like a case of collapsing margins. Check this thread out: http://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work — paradozx, May 14 '15 at 05:16
I dont need a fixed code, I would like to know the reason....... — Joel, May 14 '15 at 05:16

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

2

Here's a thread that describes the same problem: CSS margin terror; Margin adds space outside parent element

It's a common issue with non-collapsing margins.

An alternative to adding float: left is overflow: auto

edited May 23 '17 at 12:06

Community

1
1

answered May 14 '15 at 05:12

DigitalDouble

1,747
14
26

score 1 · Answer 2 · answered May 14 '15 at 05:13

1

Add display: inline-block; to.box class.

answered May 14 '15 at 05:13

Hardy

542
4
10

This is the better way to do it. A div is naturally inline, and you're using it as a block. – Robert Campbell May 14 '15 at 05:20
@Suresh Ponnukalai : yes div is naturally inline, because it doesn't force for new lines and takes up only as much width as it needs. – Hardy May 14 '15 at 05:44
1

`div` are `block` elements by default. – Hidden Hobbes May 14 '15 at 05:50
@Suresh Ponnukalai : agree. my mistake. – Hardy May 14 '15 at 06:00

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

1

Your margin is being used on the parent element and this is an expected behavior. However, there are a few ways to get around it...

Solution 1: Float the div... This will contain the margins of child elements and prevent margin collapsing.

Solution 2: You could also add a non-breaking space on the parent div

JSFiddle Demo

More info on collapsing margins can be found here.

edited May 23 '17 at 12:14

Community

1
1

answered May 14 '15 at 05:16

imbondbaby

6,351
3
21
54

score 0 · Answer 4 · answered May 14 '15 at 05:11

Just add display:inline-block; to your box class margin-top would be again alive !

JSFiddle

CSS

.box {
    display:inline-block; /*Added */
    height:420px;
    width:165px;
    background-color:#ffffff;
    margin-left:416px;
    margin-right:417px;
    margin-top:37px;
    margin-bottom:38px;
}

score 0 · Answer 5 · answered May 14 '15 at 05:44

Try this I have Modified your Style little bit

html, body {
    margin:0;
}
.template {
    height:500px;
    width:100%;
    background-color:#e1bfbe;
    margin:0;
    float: left;
}
.box {
    height:420px;
    width:165px;
    background-color:#ffffff;
    margin: 37px auto;
}

<div class="template">
    <div class="box"></div>
</div>

margin-top issue on HTML

5 Answers5