div里面的div，防止重叠答案

【问题标题】：Div inside div, prevent overlappingdiv里面的div，防止重叠
【发布时间】：2015-06-17 15:08:19
【问题描述】：

我在另一个 div 中有一个 div，当我为内部 div 设置边距和填充时，它与父级重叠。

如何防止内部 div 重叠？

这是下面的fiddle：

.outer {
  border: 1px;
  border-style: solid;
  width: 250px;
  height: 250px;
}
.inner {
  padding: 5px;
  margin: 5px;
  height: 100%;
  width: 100%;
  border: 1px;
  border-style: solid;
}

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

【问题讨论】：

标签： html css

【解决方案1】：

方法一：尝试 position:relative 为父 div 和 position:absolute 为内部 div 并在顶部、左侧、底部和右侧各添加 5px，以从各个方向推动它：

.outer {
  border:1px;
  border-style:solid;
  width:250px;
  height:250px;
  overflow:hidden;
  position:relative;
}

.inner {
  padding:5px;
  left:5px;
  top:5px;
  bottom:5px;
  right:5px;
  position:absolute;
  border:1px;
  border-style:solid;
}

小提琴：http://jsfiddle.net/7kcaavzt/2/

方法2 给父div添加display:table，给它添加5px的padding，而不是给内部div添加margin。

小提琴：http://jsfiddle.net/7kcaavzt/4/

【讨论】：

【解决方案2】：

为.inner 删除margin:5px;
添加padding: 5px父.outer
为.inner 添加box-sizing - 100% + padding 5px > 100%

.outer {
    border:1px;
    border-style:solid;
    width:250px;
    height:250px;   
    padding: 5px;
}
.inner {
    padding:5px;    
    height:100%;
    width:100%;
    border:1px;
    border-style:solid;  
     box-sizing: border-box;
}

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

【讨论】：

这是获胜者 -- More information on box-sizing 对于任何感兴趣的人。
当构建新的东西时，默认所有 div 的 box-size：div {-webkit-box-sizing:border-box; -moz-box-sizing：边框框； box-sizing: border-box;} 那么margin-,overflow-,padding问题都属于过去了。

【解决方案3】：

内部 div 重叠，因为您通过 margin 引入了 5px 偏移，但将其高度和宽度设置为 100%，即父级的高度，250px。

您可以尝试使用 CSS3 将高度和宽度设置为 100% - 2 * margin：

.inner {
    height:calc(100% - 2 * 5px);
}

jsfiddle

【讨论】：