0

私はほとんどそれを手に入れましたが、私は一つのことに行き詰まっています. 子 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>
4

2 に答える 2

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;
}
于 2013-06-06T22:16:44.213 に答える
1

ええ、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 (任意): 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/

于 2013-06-06T22:39:20.173 に答える