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-right不是。

谢谢！

Answer 1

使用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

Answer 2

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

使用box-sizing: border-box。这将使浏览器在计算宽度时使用 include 边框和填充。

Updated Fiddle

Answer 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;
}

宽度为100％的div，包括边距

3 个答案: