CSS 边距 vh 无法正常工作

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 仅适用于左侧，但不适用于顶部，我尝试使用不同的浏览器，但始终相同。这里可能是什么问题？是bug吗？

编辑：

我不能在 grenze 上使用填充，因为

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

不会做我需要的事情

Answer 1

这被称为margin collapsing，是 CSS 的一个特性，而不是错误。

父母和第一个/最后一个孩子

如果没有创建边框、内边距、内联内容、block_formatting_context 或清除来分隔 块的边缘顶部距其第一个子块的边缘顶部，或 没有边框、填充、内联内容、高度、最小高度或最大高度 将块的 margin-bottom 与它的 margin-bottom 分开 最后一个孩子，然后这些边距折叠。折叠的边距结束 在父级之外。

继续检查你的元素，你会看到边距在那里，它确实落在了它的父元素之外。

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>