html - 什么 CSS 会导致页边距在底部/右侧中断？

Question

我有一个包含以下 CSS 的 HTML 页面:

html {
  margin: 0;
  position: fixed;
  width: 100%;
  height: 100%;
}
body {
  margin: 5rem;
  width: 100%; 
  height: 100%;
  position: relative;
}

当我检查 Chrome 中的 body 元素时，我只能“看到”在左侧和顶部应用的边距。底部和右侧似乎迫使页面/布局。这导致我的一些内部内容(inside body)被截断一半，因为它“离开”了屏幕。

此外，尽管添加了 overflow: scroll，但布局中的任何地方都没有出现滚动条，我无法滚动到“隐藏”的内容。

当然，body 里面还有更多的元素，但是布局太大/太复杂，无法在这里重现。需要注意哪些可能导致布局在右侧和底部溢出的问题？

基本上我不确定为什么边距只在顶部和左侧可见，我应该寻找哪种 CSS 可能会导致这种情况。

EDIT::此外，如果我将 body 更改为 margin: 2rem auto，边距仅在“顶部”可见，而不是在左/下/右.

Answer 1

html 具有 position: fixed 并且与浏览器的宽度和高度相同。因此，当您在 body 上使用边距时，顶部和左侧边距只需将其内容向下推到 html 之外。这就是为什么您看不到它的底部和右边距的原因。

示例

*,*::before,*::after { box-sizing: border-box; }
.html {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: orange;
    font-size: 2rem;
}

.body {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 5rem;
    background-color: #000;
    color: #FFF;
    font-size: 2rem;
}

.body::before,
.body::after {
    position: absolute;
    border: solid 5px;
    font-size: 1rem;
}

.body::before {
    content: "body top-margin";
    width: 100%;
    height: 5rem;
    bottom: 100%;
    border-top: none;
}

.body::after {
    content: "body left-margin";
    width: 5rem;
    height: 100%;
    right: 100%;
    border-left: none;
}

p {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}

<div class="html"><p>html</p>
<div class="body"><p>body</p></div></div>