padding-right 或 margin-right 用于超过页面宽度（正文/视口）的内容答案

【问题标题】：padding-right or margin-right for content that exceeds page width (body/viewport)padding-right 或 margin-right 用于超过页面宽度（正文/视口）的内容
【发布时间】：2018-05-08 23:22:23
【问题描述】：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            margin: 0;
            padding: 3em;
            height: 100%;
            overflow: auto;
        }
        #content {
            width: 200em;
            height: 4em;
            background-color: #dcdcdc;
        }
    </style>
</head>
<body>
    <div id="content"></div>
</body>
</html>

获取数据后，内容宽度扩展超出页面/视口的宽度。我想在页面右侧显示一些边距/填充。

我尝试了很多东西 - 浮动、定位、BFC 等。

如何在#content 右侧获得一些空白？

【问题讨论】：

标签： html css

【解决方案1】：

问题在于正文仅与窗口一样宽，因此您实际上并不是在滚动正文，而是在画布上滚动。（你可以通过给 body 一个边框来看到这一点；这表明它不会比窗口宽。）

一种解决方案是将正文变成一个内联块，使其随内容一起拉伸，然后填充起作用。

body {
  display: inline-block;
  margin: 0;
  padding: 3em;
  height: calc(100% - 6em);
  overflow: auto;
}

#content {
  width: 200em;
  height: 4em;
  background-color: #dcdcdc;
}

&lt;div id="content"&gt;&lt;/div&gt;

【讨论】：

没有，似乎没有其他的工作。几个小时后，我通过引入一个额外的、隐藏的和隐藏边框的表格进行了修改……让我畏缩。这很优雅。谢谢。

【解决方案2】：

你必须学会这个：

padding 是内容和边框之间的空间，而 margin 是边框外的空间。

这里你必须去掉宽度：200em，然后放 100%。所以你现在可以达到我们的目标，所以右边的空白。

  body {
            margin: 0;
            padding: 3em;
            height: 100%;
            overflow: auto;
        }
        #content {
            width: 100%;
            height: 4em;
            background-color: #dcdcdc;
            margin-right:30px!important;
        }

<body>
    <div id="content"></div>
</body>

【讨论】：

OP的整个问题是内容比视口宽。
@MrLister 我知道，但他想要这个：“我怎样才能在#content 的右侧获得一些空白？”