具有 100% 宽度的 div，包括边距答案

【问题标题】：div with 100% width including margins具有 100% 宽度的 div，包括边距
【发布时间】：2015-02-24 02:09:40
【问题描述】：

我正在尝试创建一个布局，其中堆叠的 div 占据页面的整个宽度，包括两侧的 3px 缓冲区。换句话说，我不希望它们直接进入屏幕边缘，但我仍然希望它们根据屏幕宽度调整大小。

我已经设法使用填充在 div 之间获得了 3px 的边距，但是我在水平间距方面遇到了问题。如何添加包含在 100% 宽度中的填充？

这是我目前所拥有的：

HTML：

<div class="container">
    <div class="contentContainer first">
        <div class="content"> content 1 </div>
    </div>
    <div class="contentContainer">
        <div class="content"> content 2 </div>
    </div>
    <div class="contentContainer">
        <div class="content"> content 3 </div>
    </div>
</div>

CSS：

.container{
    border: 1px solid gray;
}

.container .contentContainer{
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    width: 100%;
}
.container .contentContainer .content {
    border: 1px solid gray;
    width: 100%;
    height: 75px;
}

.container .first {
    padding-top: 3px;
}

你可以在this jsFiddle 看到我的尝试。您会注意到我的padding-top 和padding-bottom 具有预期的效果，但padding-left 和padding-right 没有。

谢谢！

【问题讨论】：

如果你想要margin，为什么要使用padding 而不是margin？
尝试使用边距而不是内边距。内边距是内容和边框之间的空间，与边距相反，边距是边框外的空间。这应该可以帮助你得到你想要的。希望这会有所帮助。

标签： html css margin padding spacing

【解决方案1】：

在使用padding 时，请务必使用box-sizing: border-box 来强制填充行为应有的表现。就水平填充而言，您只需将padding: 0 3px; 添加到.container

*{ //adds to all elements or you can just add to the ones that use padding
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;    
}

.container{
  border: 1px solid gray;
  padding: 0 3px; <-----add this
}

FIDDLE

【讨论】：

谢谢@jmore！你能更详细地向我解释一下box-sixing 的作用吗？
@kat 是的，所以添加填充不计入元素width，因此div 具有100px 的width，两侧各有5px 的padding实际上是 110px 宽。 box-sizing: border-box 强制padding 向内，因此即使添加了padding，最终尺寸也是100px。这有帮助吗？

【解决方案2】：

默认情况下，边框和填充不包括在宽度计算中。所以border: 1px; padding: 3px; width: 100%; 的宽度增加了 8 个像素（两边各 4 个像素），这会导致元素溢出到其父元素之外。

使用box-sizing: border-box。这将使浏览器在计算宽度时包含边框和内边距。

Updated Fiddle

【讨论】：

【解决方案3】：

这样你就不需要不必要的 div。给容器填充。

<div class="container">
<div class="content"> content 1 </div>
<div class="content"> content 2 </div>
<div class="content"> content 3 </div>
</div>

css

.container{
border: 1px solid gray;
padding:3px 3px 0 3px;
margin-bottom:3px;
}

.container .content {
border: 1px solid gray;
height: 75px;
margin-bottom:3px;
}

【讨论】：