CSS：どのようにして別のdivの中にdivを置くことができますか？

Question

これは簡単な作業でなければならないと思います。内側のdivが外側のdivの内側に完全に収まるように、1つの境界付きdivを別の（境界にない）divの内側に配置したいと思います。言い換えれば、内側のdivの内容は、外側のdivのサイズから内側のdivの境界サイズの2倍を引いた値の100％になるようにサイズ変更する必要があります。これらのスタイルで

<div class="container"> 
    <div class="outlined"></div> 
</div> 

<div class="container"> 
</div> 

：例として、このHTML（or JSFiddle here）を考慮

.container { 
    background-color: red; 
    width: 20px; 
    height: 20px; 
} 
.outlined { 
    border: 3px solid blue; 
    background-color: green; 
    width: 100%; 
    height: 100%; 
} 

これは、この得られます

しかし、私はこれを取得しようとしています：

（灰色の背景のサイズを無視し、そのちょうど私の矛盾screenshotting）

任意のアイデアは？私は、内部divの幅と高さを手動で正しいピクセル数に設定できることを知っていますが、避けることができればそれをやりたいとは思いません。

ありがとうございました！

Answer 1

box-sizing: border-box;を.outlinedに設定すると、境界線が指定された高さ/幅内に収まるようになります。

.container { 
 
    background-color: red; 
 
    width: 20px; 
 
    height: 20px; 
 
} 
 
.outlined { 
 
    border: 3px solid blue; 
 
    background-color: green; 
 
    width:100%; 
 
    height:100%; 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
    <div class="outlined"></div> 
 
</div> 
 

 
<div class="container"> 
 
</div>

Answer 2

あなたはカルク式

.container { 
 
    background-color: red; 
 
    width: 20px; 
 
    height: 20px; 
 
    margin: 5px; 
 
} 
 
.outlined { 
 
    border: 3px solid blue; 
 
    background-color: green; 
 
    width: calc(100% - 6px); 
 
    height:calc(100% - 6px); 
 
}

<div class="container"> 
 
    <div class="outlined"></div> 
 
</div> 
 

 
<div class="container"> 
 
</div>