読者です 読者をやめる 読者になる 読者になる

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

レスポンシブデザイン

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

 

確認内容

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

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

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

 

1.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;
}

 

f:id:develog:20161204223510p:plain

f:id:develog:20161204223528p:plain親DIV

f:id:develog:20161204223533p:plain子DIV

 

2.上記1に 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;
}

 

f:id:develog:20161204223819p:plain

f:id:develog:20161204223826p:plain親DIV

f:id:develog:20161204223838p:plainDIV

 

3.上記2に 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;
}

 

f:id:develog:20161204224313p:plain

f:id:develog:20161204224317p:plain親DIV

f:id:develog:20161204224319p:plainDIV

 

4.上記3の 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;
}

 

f:id:develog:20161204224454p:plain

f:id:develog:20161204224456p:plain親DIV

f:id:develog:20161204224459p:plainDIV

 

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

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