包含边距的100％宽度的div

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

我已经设法使用填充在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没有。

谢谢！

来源

2014-12-26 kat

如果你想有一个'margin'，为什么要用'padding'，而不是'margin'？ – TylerH

尝试使用边距而不是填充。填充是内容和边界之间的空间，而不是边界之外的边界。这应该可以帮助你得到你想要的。希望这会有所帮助。 –

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

来源

2014-12-26 22:35:09 jmore009

谢谢@jmore！你能否更详细地向我解释'box-sixing'呢？ – kat

@kat是啊，所以添加填充不会计入元素'宽度'，所以''宽度'为'100px'的div在任何一边都有5px的'padding'实际上是110px宽。 'box-sizing：border-box'强制'padding'向内，所以即使添加了'padding'，最终的大小也是100px。这有帮助吗？ – jmore009

默认情况下，边框和填充不包括在宽度计算。因此border: 1px; padding: 3px; width: 100%;在宽度上增加了8个像素（每边4个像素），这导致元素在其父元之外溢出。使用box-sizing: border-box。这将使浏览器包括边框和填充，当它计算宽度。

Updated Fiddle

来源

2014-12-26 22:37:05

这样，你不需要不必要的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; 
}

来源

2014-12-26 22:48:56

包含边距的100％宽度的div

回答

相关问题