widthを100％でborder、padding、marginを試す

widthを100%で使用した時に border、padding、margin を使用するとどのような表示になるのかを確認しました。

確認内容

親と子のdiv要素を作り、それぞれwidthを100%にしました。

親要素にpadding、border、marginを付けた場合の親子div要素の表示を確認します。

表示の青色は親divのborder、緑色は親divのpadding、黄色は子のdiv要素です。

１．padding、marginを付ける

HTML

<div class="box">
<div class="box1"></div>
</div>

CSS

.box {
width: 100%;
padding: 25px;
border: solid 25px #11A1A8;
background: #0C6308;
}
.box1 {
width: 100%;
height: 100px;
background: #B5BF0F;
}

親DIV

子DIV

２．上記１に box-sizing を付ける

HTML

<div class="box">
<div class="box1"></div>
</div>

CSS

.box {
width: 100%;
padding: 25px;
border: solid 25px #11A1A8;
background: #0C6308;
box-sizing: border-box;　<=追加
}
.box1 {
width: 100%;
height: 100px;
background: #B5BF0F;
}

親DIV

子DIV

３．上記２に margin を付ける

HTML

<div class="box">
<div class="box1"></div>
</div>

CSS

.box {
width: 100%;
margin: 10px;　<=追加
padding: 25px;
border: solid 25px #11A1A8;
background: #0C6308;
box-sizing: border-box;
}
.box1 {
width: 100%;
height: 100px;
background: #B5BF0F;
}

親DIV

子DIV

４．上記３の width の指定を変更する

HTML

<div class="box">
<div class="box1"></div>
</div>

CSS

.box {
width: calc(100% - 20px);　<=100%からmarginの20pxを引く
margin: 10px;
padding: 25px;
border: solid 25px #11A1A8;
background: #0C6308;
box-sizing: border-box;　<=これはborderとpaddingにしか効かない
}
.box1 {
width: 100%;
height: 100px;
background: #B5BF0F;
}

親DIV

子DIV

上記の結果は、CSSを以下のように変更しても可能です。

width: calc(100% - 120px);　<=「-20」を「-120」に変更
box-sizing: border-box;　<=この行を削除