CSS : div를 다른 div의 내부에 유지하는 방법은 무엇입니까?

Question

이것은 간단한 작업이어야한다고 생각합니다. 하나의 경계가있는 div를 다른 div (비 경계선) div 안에 넣고 내부 div가 외부 div 안에 완전히 있도록합니다. 즉, 내부 div의 내용은 내부 div의 테두리 크기의 두 배를 뺀 외부 div의 크기로 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

당신은 완벽하게 CALC 표현

.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>

에게