html - 使 div 100% 宽度，内容区域两侧的边距相等

Question

这就是我想要做的。当网站缩小到中小尺寸时，我想要 100% 宽度和 margin: 20px 四周。我试图不为宽度定义特定像素，以便它尽可能在所有设备上保持一致。我认为我的 CSS 会将 20px 的边距应用到右侧和左侧，但它仅适用于左侧，而右侧超出了窗口。

这是我的 HTML:

<div class="swipe-content">
    <div id="your-accounts">
        <h1>Your Accounts</h1>
        <p>
            Your accounts data will go here.
        </p>
    </div>
</div>

这是我的 CSS:

.swipe-content {
  clear: both;
  width: 100%;
  padding: 20px;
  background-color: #fff;
  margin-top: 20px;
}

很抱歉在这上面浪费了任何人的时间，但已经晚了，我可能错过了一些非常简单的东西。几年后我将重新开始编码，我们将不胜感激。

Answer 1

在 CSS 中，当您指定宽度时，通常表示内部宽度而不是外部宽度。

外宽=内宽+边距+内边距+边框

在您的情况下，您的 div 变为 100% + 20px(左填充)+ 20 px(右填充)

当您添加 display: block 时，div 会自动尝试占据尽可能多的宽度。

当然，在 CSS 3 中，您可以按照 focorner 的建议利用 box-sizing 属性。但为了兼容，我建议删除 width: 100% 并添加 display: block。

为此，您需要一个宽度为 100% 且为 display:block

的外部 div

长话短说

{
display: block;
// width: 100%; remove this
padding: 20px
}