サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

【CSS】paddingの指定で親要素をはみ出してしまう問題の解決(box-sizing)

【CSS】paddingの指定で親要素をはみ出してしまう問題の解決(box-sizing)

この記事にはプロモーションが含まれています。

CSSではmarginやpaddingを使った余白の調整を行う機会が非常に多いです。

marginは要素の外側の余白、paddingは要素の内側の余白ということは、基礎知識として既に学習済みの方も多いではないでしょうか。

ですが、単純に外側=margin、内側=paddingという認識だけでは、予期しない表示結果になってしまう場合があります。

ありがちな誤解が、paddingは要素の内側の余白なので、paddingでは親要素をはみ出すことはないというものです。

一見、間違っていないように思えますよね。ですが、実はこの認識は間違いです。

今回は、paddingを指定した結果、子要素が親要素の幅を超えてしまった!…というトラブルを解決する方法をご紹介します

この記事を読むことで分かること
  • ・paddingの指定で親要素をはみ出してしまう原因
  • ・box-sizingプロパティの指定方法

– 目次 –

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

表示結果

child

子要素の幅は親要素幅に対して100%とし、親要素を超える幅を指定していないにもかかわらず、padddingの指定によって子要素が親要素幅を超えてはみ出してしまっていますね。

サンプルでは分かりやすく枠線と背景色をつけているのではみ出ているのが一目で確認できますが、それらがなければ気づくのが難しい場合もあります。

ちょっと表示がおかしいかな?と違和感を抱いたら、とりあえず要素に枠線(border)や背景色をつけて確認してみると良いです。

ブラウザの検証ツールで検証するにしても、予め枠線をつけておいて要素間の境界を分かりやすくしておいた方が検証しやすくなります。

    POINT!
  1. ・デフォルトでは要素幅に子要素のpaddingを含めないようになっている!
  2. ・子要素のpaddingで親要素の幅を超えると、親要素をはみ出してしまうことになる!
  3. ・表示に違和感を感じたら、要素に境界線や背景色をつけてから検証してみよう!

はみ出ないようにするには

子要素のpadding指定で親要素からはみ出ないようにするには、box-sizingを指定する必要があります。

box-sizingでは、要素の幅にpadding(内側の余白)や、border-width(境界線の幅)を含めるかどうかを指定することができます。

box-sizingの値は2つしかなく、要素幅に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;
}

表示結果

child

なぜ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;
}

表示結果

child

また、輪郭線であるoutlineはそもそも要素の幅に関係しないため、親要素の幅を超えて表示させることが可能です。

CSS

一部のみ抜粋
.child {
	box-sizing: border-box;
	border: dashed 5px yellow;
	outline: 15px white dotted;
}

表示結果

child
    POINT!
  1. ・box-sizingプロパティの値をborder-boxにすることで、padding幅を要素幅に含めることができる!
  2. ・padding幅だけでなく、境界線の幅(border-width)も含める!
  3. ・border-boxの方が幅の計算をイメージしやすいので、こちらを基準にしておくのもアリ!

今回の動画で紹介したコード!

今回の解説動画で使用したコードです。学習用としてご自由にコピペしてお使い下さい。(※スクロールできます)

HTML・CSS

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>box-sizing</title>
	<style>
		* {
			box-sizing: border-box;
		}
		body {
			display: grid;
			height: 100vh;
			place-content: center;
		}
		.parent {
			width: 500px;
			height: 400px;
			border: solid 5px;
			font-size: 5vw;
		}
		.child {
			width: 100%;
			height: 100%;
			background-color: aquamarine;
			display: grid;
			place-content: center;
			padding: 30px;
			position: relative;
			z-index: -1;
			box-sizing: border-box;
			border: dashed 30px red;
			outline: dotted 50px blue;
			outline-offset: 30px;
		}
	</style>
	
</head>

<body>
	<div class="parent">
		<div class="child">child</div>
	</div>
</body>
</html>

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:応用情報技術者/基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン