パディングと内側の境界線

Question

基本的に、箱が 2 つあり、1 つはもう 1 つの内側にあります。外側のボックスでは、すべての内側のテキストのパディングを 10px に設定しましたが、内側のボックスの境界線はこのルールに従っていないようです。

.plan {
    表示ブロック;
    マージン: 20px 20%;
    幅: 自動;
    境界線: 2 ピクセルの実線。
    境界半径: 5px;
}

。プラン * {
    テキスト装飾: なし。
    パディング: 0px 10px;
}

.plan * .description {
    境界線: 2 ピクセルの黒一色。
}

内側の境界線を外側の境界線の右から 10 ピクセルの位置から強制的に開始する方法はありませんか?

Answer 1

リーリー

上記のコード スニペットでは、padding-right 属性を使用して .plan クラスのコンテンツの右側に 10 ピクセルのスペースを追加し、margin-right 属性は .description クラスによって指定されて、外側の境界線の右側の内側のマージン 横から 10 ピクセルの位置から開始します。さらに、box-sizing: border-box; を使用すると、コンテンツと境界線を外側のボックスの幅に制限するのに役立ちます。

これらの調整により、内側のボックスのコンテンツに 10 ピクセルの余白を作成するのに役立つことを願っています。