Div內div，防止重疊

Question

我有一個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>

Answer 1

方法1：嘗試位置：相對於母體的div和位置是：絕對用於內的div並添加每個5像素向上，向左，向下和向右推，以從各方推動它：

.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和添加5像素填充到它比添加餘量的內格。

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

Answer 2

內div重複，因爲你推出了一款爲5px通過margin偏移，但設置其高度和寬度100%，這是父母的身高，250像素。

您可以嘗試的高度和寬度設置爲100% - 2 * margin使用CSS3：

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

jsfiddle

Answer 3

1. 刪除margin:5px;爲.inner
2. 添加padding: 5px父.outer
3. 添加box-sizing爲.inner - 100％+填充5像素> 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>