paddingが親要素をはみ出す原因
paddingは要素の内側の余白なので、大きな値を指定したとしても内側の余白が広がるだけで、親要素からはみ出ることはないような気がします。
ですが、実は要素の幅にpaddingを含めるか否かを指定できるようになっていて、デフォルトではpadding含めない設定になっています。
要するに、そのままでは子要素のpaddingの指定で親要素をはみ出してしまう可能性があるということです。
下のサンプルは、親要素の横幅（width）を250px、縦幅（height）を200pxに指定した上で、境界線を指定しています。
そして、子要素の横と縦の幅をそれぞれ100%とし、背景色を指定した上で、paddingを20pxにしたものです。
HTML
<div class="parent">
<div class="child">child</div>
</div>
CSS
.parent {
border: solid 5px;
width: 250px;
height: 200px;
}
.child {
width: 100%;
height: 100%;
background-color: lightcoral;
padding: 20px;
display: grid;
place-content: center;
position: relative;
z-index: -1;
}
子要素の幅は親要素幅に対して100%とし、親要素を超える幅を指定していないにもかかわらず、padddingの指定によって子要素が親要素幅を超えてはみ出してしまっていますね。
サンプルでは分かりやすく枠線と背景色をつけているのではみ出ているのが一目で確認できますが、それらがなければ気づくのが難しい場合もあります。
ちょっと表示がおかしいかな？と違和感を抱いたら、とりあえず要素に枠線（border）や背景色をつけて確認してみると良いです。
ブラウザの検証ツールで検証するにしても、予め枠線をつけておいて要素間の境界を分かりやすくしておいた方が検証しやすくなります。
POINT!
- ・デフォルトでは要素幅に子要素のpaddingを含めないようになっている！
- ・子要素のpaddingで親要素の幅を超えると、親要素をはみ出してしまうことになる！
- ・表示に違和感を感じたら、要素に境界線や背景色をつけてから検証してみよう！
はみ出ないようにするには
子要素のpadding指定で親要素からはみ出ないようにするには、box-sizingを指定する必要があります。
box-sizingでは、要素の幅にpadding（内側の余白）や、border-width（境界線の幅）を含めるかどうかを指定することができます。
box-sizingの値は２つしかなく、要素幅にpadding/border幅を含めないcontent-box（既定値）、それらを含めるborder-boxです。
content-boxが既定値（デフォルト）であるため、通常、あえてcontent-boxを指定する機会はありません。
指定する機会があるとすれば、border-boxの方でしょう。
はみ出してしまっている子要素にborder-boxを指定することで、要素幅にpaddingの幅が含まれるようになり、親要素幅からはみ出さなくなります。
HTML
<div class="parent">
<div class="child">child</div>
</div>
CSS
.parent {
border: solid 5px;
width: 250px;
height: 200px;
}
.child {
width: 100%;
height: 100%;
background-color: lightcoral;
padding: 20px;
box-sizing: border-box;
display: grid;
place-content: center;
position: relative;
z-index: -1;
}
なぜpadding幅を含めないcontent-boxの方がデフォルトなのかは分かりませんが、通常、padding幅を含めるborder-boxの方がイメージしやすく、デザイン・コーディングしやすいです。
なので、全ての要素にborder-boxを適用させておき、必要な場面が出てきたらcontent-boxを指定するという方法もありです。
CSS
/*全ての要素にborder-box指定*/
* {
box-sizing: border-box;
}
なお、border-boxに指定することで境界線の幅（border-width）も要素の幅に収まるようになります。
CSS
一部のみ抜粋
.child {
box-sizing: border-box;
border: dashed 5px yellow;
}
また、輪郭線であるoutlineはそもそも要素の幅に関係しないため、親要素の幅を超えて表示させることが可能です。
CSS
一部のみ抜粋
.child {
box-sizing: border-box;
border: dashed 5px yellow;
outline: 15px white dotted;
}
POINT!
- ・box-sizingプロパティの値をborder-boxにすることで、padding幅を要素幅に含めることができる！
- ・padding幅だけでなく、境界線の幅（border-width）も含める！
- ・border-boxの方が幅の計算をイメージしやすいので、こちらを基準にしておくのもアリ！
