CSS margin vh not working right

Question

  #grenze { background: green; height: 96vh; width: 96vh; } #baukasten { background: white; height: 86vh; width: 86vh; margin: 5vh; border: 1px solid #DDDDDD; overflow: hidden; } 

 <div id="grenze"> <div id="baukasten"> </div> </div> 

Margin works only to left but not to top, I tried with different browsers and it's always the same. What could be the problem here? Is it a bug?

EDIT:

I can't use padding on grenze instead because

            $( ".dragresize" ).draggable({
                containment: "#grenze"
            });

Won't do what I need

Answer 1

This is known as margin collapsing and is a feature of CSS, not a bug.

Parent and first/last child

If there is no border, padding, inline content, block_formatting_context created 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.

Go ahead and inspect your element and you'll see the margin is there, and it has indeed fallen outside of it's parent.

Answer 2

 #grenze { background: green; height: 96vh; width: 96vh; padding: 5vh; box-sizing: border-box; } #baukasten { background: white; height: 86vh; width: 86vh; border: 1px solid #DDDDDD; overflow: hidden; } 

 <div id="grenze"> <div id="baukasten"> </div> </div> 

 #grenze { background: green; height: 96vh; width: 96vh; } #baukasten { background: white; height: 86vh; width: 86vh; transform: translate(5vh, 5vh); border: 1px solid #DDDDDD; overflow: hidden; } 

 <div id="grenze"> <div id="baukasten"> </div> </div>