Question

我们如何才能使内部div与来自四个方面的外部div具有相同的边距？

这是我尝试过的：

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

我的风格：

div
{
    overflow: hidden;
}

.outer{
    height: 100px;
    width: 100px;
    background-color: gainsboro;
}

.inner{
    background-color: wheat;
    margin: 5px;    
}

注意：我想用纯CSS实现这一点+我不想做这样的事情：

.inner{
    height: 90px;
}

或

.inner{
    height: 90%;
}

Answer 1

好吧，你有奇怪的愿望，因为你不想使用height属性，所以唯一的方法是使用display: table;作为父元素，display: table-cell;作为子元素。由于td元素不会margin使用padding在父元素上box-sizing属性设置为border-box，因此它会计算{{1}在内部而不是在元素之外。

Demo

padding

Answer 2

给内部div顶部，底部，左侧和右侧。这将使它与外部之间的间距。

<!doctype html>
<html>
    <head>
        <title>
            Bla!
        </title>
        <style type='text/css'>
            div { overflow:hidden; }
            div.outer {height:100px; width:100px; background-color:gainsboro; position:absolute} 
            div.outer >div {top:5px; left:5px; right:5px; bottom:5px; position:absolute; background-color: wheat;} 
        </style>
    </head>
    <body>
        <div class='outer'>
            <div></div>
        </div>
    </body>
</html>

Answer 3

将padding提交给.outer。

尝试：

.outer{
    height: 90px;
    width: 90px;
    padding:5px;
    background-color: gainsboro;
}
.inner{
    background-color: wheat;        
    height:100%;
}

DEMO here.

如何给内部div提供相同的保证金？

3 个答案: