包含邊距的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

回答

相關問題