margin-top does not work properly

Question

I just can't find the issue with this script: http://jsfiddle.net/AKB3d/

#second {
  margin-top:50px;
  ...
}

I want the yellow box to be 50px below the top border of the right box, but whenever I add margin-top to the yellow box, the red box goes down, too. Why?

score 2 · Accepted Answer · edited May 23 '17 at 10:31

2

Give an overflow:hidden to the parent div, ie #first

This happens because of collapsing margins. Vertical margins disappear when parent is set to overflow:visible

edited May 23 '17 at 10:31

Community

1
1

answered Mar 23 '14 at 17:25

James

4,540
1
18
34

collapsing margins can be triggered with a border or a padding on the red box too , so it keeps it inside. just as a reminder :) http://jsfiddle.net/AKB3d/3/ and background-clip not too mess with borders http://jsfiddle.net/AKB3d/4/ – G-Cyrillus Mar 23 '14 at 17:35

score 1 · Answer 2 · answered Mar 23 '14 at 17:28

1

Check this Working fiddle

#first {
margin:auto;
width:100px;
height:100px;
background:red;
overflow:hidden;
}

answered Mar 23 '14 at 17:28

Binita Lama

1,268
1
8
16

margin-top does not work properly

2 Answers2