outdiv_inner.height +＃outdiv_inner.margin-top +＃outdiv_inner.margin-bottom＆gt; ＃outdiv.height

Question

我打算将div放在另一个带填充的div中。但我面临一些问题，顶级位置仍然相同。我该如何解决这个问题

<style type="text/css">
#outdiv
{
    margin: 20px auto 20px auto;
    width: 1100px;
    height: 630px;
    max-height: 100%;
    background: #1C4675;
    font-size: 14px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    position:relative;
}

#outdiv_inner
{   
    margin: 10px 5px 10px 5px;
    width: 1090px;
    height: 620px;
   
    background: #E8E8E8;
    font-size: 14px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

</style>

<html>
<div id="outdiv">
    <div id="outdiv_inner"></div>
</div>
  </html>

Answer 1

如果您希望蓝色div显示在灰色背后，我相信您真的会将padding与margin混淆。设置填充，在#outdiv上使用相同的值：

＆＃13;

#outdiv
{
    margin: 20px auto 20px auto;
  	padding: 10px 5px 10px 5px;
    width: 1100px;
    height: 630px;
    max-height: 100%;
    background: #1C4675;
    font-size: 14px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    position:relative;
}

#outdiv_inner
{   
    width: 1090px;
    height: 620px;
    background: #E8E8E8;
    font-size: 14px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

</style>

＆＃13;

<html>
<div id="outdiv">
    <div id="outdiv_inner"></div>
</div>
  </html>

＆＃13;

当然，如果是这种情况，你可以简单地使用蓝色边框＆＃34;在内部div：

＆＃13;

#outdiv
{
    margin: 20px auto 20px auto;
  	padding: 10px 5px 10px 5px;
    width: 1100px;
    height: 630px;
    max-height: 100%;
    background: #1C4675;
    font-size: 14px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    position:relative;
}

#outdiv_inner
{   
    width: 1090px;
    height: 620px;
    background: #E8E8E8;
    font-size: 14px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
  	border-top: 10px solid #1C4675;
  	border-bottom: 10px solid #1C4675;
  	border-left: 5px solid #1C4675;
  	border-right: 5px solid #1C4675;
}

＆＃13;

<div id="outdiv_inner"></div>

＆＃13;

Answer 2

这样的东西？

#outdiv
{
    padding: 5px;
    width: 1100px;
    height: 630px;
    max-height: 100%;
    background: #1C4675;
    font-size: 14px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    position:relative;
}

#outdiv_inner
{   
    width: 1090px;
    height: 620px;
    background: #E8E8E8;
    font-size: 14px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

<div id="outdiv">
    <div id="outdiv_inner">
    </div>
</div>

这是Fiddle

Answer 3

将overflow:auto添加到您的#outdiv。

<强> jsFiddle example

Answer 4

outdiv_inner.height +＃outdiv_inner.margin-top +＃outdiv_inner.margin-bottom＆gt; ＃outdiv.height

试试这个：

#outdiv_inner
{   
    margin: 10px 5px 10px 5px;
    width: 1090px;
    height: 610px;
   display:block;
    background: #E8E8E8;
    font-size: 14px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

在另一个div内部划分一些填充

4 个答案:

outdiv_inner.height +＃outdiv_inner.margin-top +＃outdiv_inner.margin-bottom＆gt; ＃outdiv.height