css - 带边框的圆角切口；从子元素的宽度和高度中减去边框大小

Question

我几乎得到了它，但我被困在一件事上。我正在尝试使子 p 标签流动到父 div 的宽度和高度。我只是不知道如何使 p 元素比父 div 略小（我相信是 4px），以便显示右边框和下边框。看看这个jsFiddle。

和有问题的代码：

.box {
    background: #b2b2b2;
    height: 160px;
    width: 210px;
    margin: 25px;
    padding: 0;
    position: relative;
    overflow:hidden;
}
.box p {
    color: #fafafa;
    width:100%;
    height:100%;
    margin: 0;
    padding: 25px;
    border: 2px solid white;
}

<div class="box"><p class="boxBtm">Some text in the box</p></div>

Answer 1

我相信box-sizing: border-box;是你的答案。

将其放入您的.box p定义中：

.box p {
    color: #fafafa;
    box-sizing: border-box;
    width:100%;
    height:100%;
    margin: 0;
    padding: 25px;
    border: 2px solid white;
}

Answer 2

是的，正如 Smuuf 所说的 box-sizing：border-box 就是答案。为了更好地理解这一点，这里有一个很好的阅读：

http://css-tricks.com/box-sizing/

支持

Opera 8.5+：盒子大小

Firefox（任何）：-moz-box-sizing

Safari 3：-webkit-box-sizing（在 5.1+ 版本中无前缀）

IE8+: box-sizingChrome (any): box-sizing

这是您的解决方案：

.box p {
    color: #fafafa;
    width:100%;
    height:100%;
    margin: 0;
    padding: 25px;
    border: 2px solid white;
    box-sizing: border-box;
}

http://jsfiddle.net/amrebel/qkUVe/8/