CSS和间距

Question

我对这部分CSS有一点问题（它似乎不是很多，但我不明白......）

#bas {
    position:absolute;
    background-color: #ccc;
    margin-top:10%;
    width:100%;
    height:90%;
}

#haut {
    position:absolute;
    background:#FFFF00;
    margin-top:0%;
    width:100%;
    height:10%;
}

因此，在我看来，＃haut将占据页面的10％，＃bas将占用另外90％的“haut”高于“bas”。

但如果你看这个小提琴 https://jsfiddle.net/ypteL83a/2/ 页面顶部和“haut”之间有空格，“haut”和“bas”之间有更大的空间，我想知道为什么这个空间在这里？

提前致谢！

Answer 1

使用top进行绝对定位，而不是margin-top：

https://jsfiddle.net/ypteL83a/4/

body
{
  background-color:#FFFFFF;
  margin:0 ;
}

#bas {
  position:absolute;
  background-color: #ccc;
  top:10%;
  width:100%;
  height:90%;
}

#haut {
  position:absolute;
  background:#FFFF00;
  top:0%;
  width:100%;
  height:10%;
}

Answer 2

如果您设置保证金：0，您的内容会有默认保证金;在#bas div上，它将与顶部元素对齐。

#bas {
position:absolute;
background-color: #ccc;
margin-top:10%;
width:100%;
height:90%;
margin:0;
}

Answer 3

在#bas margin-top：10％将占据浏览器窗口高度的前10％。

Answer 4

当你使用上/下边距/填充时，它是根据宽度而不是高度计算出来的。我很确定这是

的情况

Answer 5

试试这个

 #bas {
            position:absolute;
            background-color: #ccc;
            margin:0 auto;
            width:100%;
            height:90%;
        }