div内div，防止重叠

Question

我在另一个div中有一个div，当我设置margin和padding到内部div时，它与parent重叠。

如何防止内部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>

Answer 1

1. 删除margin:5px;
的.inner
2. 添加padding: 5px父.outer
3. 为box-sizing添加.inner - 100％+填充5px＆gt; 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>

Answer 2

方法1 ：尝试位置：父级div的相对位置和内部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 将display：table添加到父div并向其添加5px填充，而不是向内部div添加边距。

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

Answer 3

内部div重叠，因为您通过margin引入了5px偏移量，但将其高度和宽度设置为100%，这是父亲的身高，250px。< / p>

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

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

jsfiddle