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

Check this question - http://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work — Nick, Feb 23 '17 at 20:16
Do you really need the full explanation? I could do it the way Andrey Fedorov suggested but it wont work with $( ".dragresize" ).draggable({ containment: "#grenze" }); the right way. I just want margin to work how it supposed to — Eddy Unruh, Feb 23 '17 at 20:17
Hi , try to write display:inline-block on #baukasten --- children element — jseezo, Feb 23 '17 at 20:19
Thanks display:inline-block did the trick. God I HATE CSS !! — Eddy Unruh, Feb 23 '17 at 20:21

score 4 · Answer 1 · edited Jun 20 '20 at 09:12

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.

Andrei Fedorov · Accepted Answer · 2017-02-23T20:22:40.567

0

#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>

edited Feb 23 '17 at 20:22

answered Feb 23 '17 at 20:13

Andrei Fedorov

3,689
2
13
25

I don't need padding, the stuff that I'm doing will only work with margin – Eddy Unruh Feb 23 '17 at 20:15
@AnneSchwarz why? explain the initial problem – Andrei Fedorov Feb 23 '17 at 20:16
Ok. I added second option. ) – Andrei Fedorov Feb 23 '17 at 20:23
That works :D just like adding display:inline-block to baukasten – Eddy Unruh Feb 23 '17 at 20:27

CSS margin vh not working right

2 Answers2

Linked