Question

我几乎得到了它，但我坚持一件事。我正在尝试让child 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;是您的answer。

将其放入 .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说盒子大小：边框是答案。为了更好的对此的理解，这是一个很好的阅读：

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

支持

Opera 8.5+：box-sizing

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/

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

2 个答案: