需要填充其父項的邊距和填充的div

我有一個容器div（它的寬度和高度均以像素爲單位）。需要填充其父項的邊距和填充的div

有沒有辦法添加一個子div，它將填滿它的整個父項，但仍然有餘量和或填充？

假設父div是200px寬，200px高。

如果我給孩子div的寬度/高度爲100％，那麼它假設我的意思是內容大小爲200px，然後如果我添加填充或邊距，孩子的大小變得更大，那麼父母。

我希望孩子div的內容區域是什麼都被取出，每邊爲5px邊距後離開......

和請不要告訴我要減去2 * 5像素從200像素 - 我知道，但我正在尋找更好的解決方案。

會不會是CSS無法處理這樣一個簡單的任務...

來源

2012-01-19 epeleg

你可以嘗試以下方法：

#outer { 
    width: 200px; 
    height: 200px; 
    background: blue; 
    position: relative; 
} 

.inner { 
    position: absolute; 
    top: 5px; 
    right: 5px; 
    bottom: 5px; 
    left: 5px; 
}

演示：http://jsfiddle.net/wYNYh/1/

來源

2012-01-19 11:56:46 Yoshi

我喜歡這個解決方案（即使我必須添加5px 4次），因爲1）是我所問的。 2）它不修改容器元素。謝謝。如果不是更好的解決方案將顯示自己，我會接受這個答案。 – epeleg

如果您想要#inneridener div與#inner與#inner相關的相同方式與#inner相關，您將如何處理絕對/相對位置？ – epeleg

你可以再次使用相同的CSS。只需將#inner更改爲.inner，以便可以將其重用爲一個類。它應該適用於嵌套的div。 – Yoshi

事情是這樣的：http://jsfiddle.net/Rnf82/？

來源

2012-01-19 11:41:42 giker

看到丹尼斯特勞布的建議答案發布coment。 – epeleg

-1

您可以設置外部div的填充。然後內部div將只佔用剩下的東西。

看一看這樣的：（try yourself at jsFiddle）

.outer { 
width: 200px; 
height: 200px; 
background-color: #DD0000; 
padding: 5px; 
box-sizing: border-box; 
} 
.inner { 
width: 100%; 
height: 100%; 
background-color: #0000DD; 
} 

<div class="outer"> 
    <div class="inner"></div> 
</div>

真正做這相當於至於問題而言的這兩種方式。記住由如何設置標準html和css所產生的冗餘是很重要的。

來源

2012-01-19 11:44:36

這會使'.outer' 210px寬而高。通過更改200到190來糾正這一點基本上是相同的：* ...並請不要告訴我從200px減去2 * 5px ... * – Yoshi

設置所有的元素有盒大小的樣式表中的邊界框。

這將總結所有元素的填充，因此如果添加任何填充，則不必擔心任何中斷。

*{box-sizing: border-box;}

來源

2017-04-25 15:00:15 dusty

需要填充其父項的邊距和填充的div

回答

相關問題