How margin works for a div with background inside element with background?

Question

You can watch the problem here at jsfiddle - http://jsfiddle.net/Askerov/xz4t4bce/

The thing is i want to move the inside element, but i do not want parent element to move with it? Can anybody explain how it works? And how do i move such element?

.aa{
background:#ccc;
width:600px;
height:300px; } 
.bbb{
background:#333;
width:150px;
height:50px;
margin-top:40px;}

<div class='aa'>
<div class='bbb'>
</div>

There are a variety of options. Add `overflow:hidden` to the parent, or `float-left` or add an invisible 1px top border. — Paulie_D, Dec 02 '14 at 16:57
Insivible border worked, but what the...Could you explain how and why that happens ? — Javid Askerov, Dec 02 '14 at 16:59
This might help - http://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element — Paulie_D, Dec 02 '14 at 17:01

score 1 · Accepted Answer · answered Dec 02 '14 at 17:02

1

You're seeing collapsing margins. Just add overflow:auto; to the parent div to restore the behavior you seek

jsFiddle example

answered Dec 02 '14 at 17:02

j08691

197,815
30
248
265

score 0 · Answer 2 · answered Dec 02 '14 at 19:09

ALWAYS add the position of the elements, once you do that, it will allow you to move it, see here:

.aa{
    background:#ccc;
    width:600px;
    height:300px;
    position:relative;
}

.bbb{
    background:#333;
    width:150px;
    height:50px;
    top:40px;
    position:absolute;
}

jsFiddle

How margin works for a div with background inside element with background?

2 Answers2