需要填充其父项的边距和填充的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

回答

相关问题