html - CSS:如何给一个 div 加边框，将它完全放在另一个 div 中？

Question

我认为这应该是一项简单的任务:我想将一个带边框的 div 放在另一个(无边框)div 的内部，以便内部 div 完全位于外部 div 的内部。换句话说，内部 div 的内容应调整为外部 div 大小的 100%，减去内部 div 边框大小的两倍。例如，考虑这个 HTML ( or JSFiddle here ):

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

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

使用这些样式:

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

这产生了这个:

但我正在尝试得到这个:

(忽略灰色背景的大小，那只是我不一致的截图)

有什么想法吗？我知道我可以手动将内部 div 的宽度和高度设置为正确的像素数，但如果可以避免，我宁愿不这样做，因为它会在我调整外部 div 大小时增加另一件事要记住。

谢谢!

Answer 1

在 .outlined 上使用 box-sizing: border-box; 使其边框包含在指定的高度/宽度内。

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