html - 宽度为 100% 的 div，包括边距

Question

我正在尝试创建一个布局，其中堆叠的 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-对不是。

谢谢!

Answer 1

在使用 padding 时一定要使用 box-sizing: border-box 来强制 padding 表现得像它应该的那样。就水平填充而言，您只需将 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