こんにちは、Mochiです。
Webデザインにおいて、余白をとった配置は非常に重要です。
でもCSSで余白ってどうやって作るんだろう？CSSの余白をなくすのってどうするんだっけ？🤔
そんな方に向けて、この記事ではCSSで余白を調整するパディング（padding）とマージン（margin）プロパティについて詳しく解説します。
この記事を読んでいただくことで、みなさんは自在にパディングやマージンを使って、意図する余白を作ったり、無くしたりできるようになります。
では、まずはパディングとマージンを深く理解するために役立つ前提知識、ボックスモデルについて学んでいきましょう。Mochi Blogの幅と高さに関する記事を読んでいただいた方は、記憶の定着のために読んでみてください。
🧐前提知識：ボックスモデル
ボックスモデルは、次の図のような要素の大きさを構成するモデルです。今回扱うパディングやマージンを含め、様々なものがあります。
では、それぞれ理解していきましょう。
コンテンツ
まずコンテンツは、要素そのものが表示される領域で、1番基本となる幅と高さを持ちます。
この幅と高さを指定する方法については、記事「CSSで幅（width）と高さ（height）を指定する方法」を読んでいただくと、理解が深まります。
ボーダー
次にボーダーは、コンテンツの周りにあります。そして、このボーダー自体にも太さがあります。
ボーダーについて、詳しく知りたい方は記事「CSSで文字や要素に色を付ける・変更する方法をわかりやすく解説」を読んでいただくと、より知識が身につきます。
パディング
コンテンツとボーダーの間には余白があり、これが今回学ぶパディングです。この余白を作成したり、無くす方法をこの後学んでいきます。
図のようにコンテンツ（要素そのもの）の大きさには影響を与えませんが、要素内のコンテンツとボーダーとの距離を調整します。そのため、要素の外観を調整するために使用されます。例えば、テキストをボックス内で中央に配置するためにパディングを使用できます。
フィルエリア
コンテンツからボーダーまでを合わせた領域をフィルエリアと呼びます。この範囲がbackground-colorプロパティやbackground-imageプロパティで塗られます。
コンテンツだけが塗られるわけではなく、パディングの領域も塗られることを理解しておきましょう。
マージン
ボーダーの外側には余白があり、これが今回学ぶマージンです。要素とその周囲の要素との間の余白を調整することができます。パディング同様、余白を作成したり、無くす方法をこの後学んでいきます。
マージンは、要素同士の配置を調整し、ページのデザインやレイアウトを整えるために重要です。例えば、ヘッダーと本文の間隔を調整するためにマージンを使用できます。
パディングとマージンの違いが最初は曖昧かもしれません。パディングは内側、マージンは外側と覚えておきましょう。
そして、最終的な要素の幅や高さは、フィルエリアと同じになります。
つまり、幅は
- 左ボーダー + 左パディング + 幅 + 右パディング + 右ボーダー
となり、高さは
- 上ボーダー + 上パディング + 高さ + 下パディング + 下ボーダー
となります。パディングも含まれることに注意してください。
また、ボックスのサイズはフィルエリアにマージンを足したものになります。
つまり、幅は
- 左マージン + フィルエリアの幅 + 右マージン
となり、高さは
- 上マージン + フィルエリアの高さ + 下マージン
となります。マージンも含まれることに注意してください。
以上がボックスモデルについてです。では、基本を理解したところで、まずはパディングの使い方を学んでいきましょう。
✍️パディングの使い方
まずは、上下左右それぞれの方向にパディングを指定するプロパティについて、次のものがあります。
padding-top: 上方向のパディングを指定するpadding-right: 右方向のパディングを指定するpadding-left: 左方向のパディングを指定するpadding-bottom: 下方向のパディングを指定する
例えば、上に30pxのパディングを入れる場合は、次のようになります。
h1 {
padding-top: 30px;
}
他にも”%”や”rem”などの単位を与えることができます。また、”auto”を指定することで、関連するプロパティによって自動的に値が設定されます。
逆にパディングの余白を無くす場合は、次のように0を指定します。
h2 {
padding-top: 0;
}
若干の余白があるように見える部分は、ボックスモデルで出てきたコンテンツの高さによるものです。パディングによる余白は0になっています。
しかし、上下左右全てにパディングを指定したい場合、4つのプロパティを毎回書くのは大変ですよね🥲。
そこで、上下左右のパディングを一度に指定するプロパティがあります。
padding: 上下左右のパディングを一度に指定する
例えば、上下左右全てに30pxのパディングを入れる場合には
h3 {
padding: 30px;
}となります。
また、paddingプロパティには上下と左右別にするなどの省略形が存在するので、そちらも覚えておきましょう。
padding: <top&bottom>px <right&left>px: 上下と左右のパディングを分けてそれぞれ指定するpadding: <top>px <right&left>px <bottom>px: 上と左右と下のパディングを分けてそれぞれ指定するpadding: <top>px <right>px <bottom>px <left>px: 上下左右のパディングを全て分けてそれぞれ指定する
例えば次のように使います。
p {
padding: 10px 20px;
padding: 10px 20px 30px;
padding: 10px 20px 30px 40px;
}これらは順番でパディングを入れる方向を認識しています。そのため、順番を入れ替えないことが重要です。
実際に使っていると、毎回どの順番だったかを忘れてしまうことが多いです。覚えるコツとしては、まず上（トップ）が最初にきます。そして、以降は時計回りに指定します。上と時計回りでなんとか対応していきましょう💪
✍️マージンの使い方
続いて、上下左右それぞれの方向にマージンを指定するプロパティについて、次のものがあります。
margin-top: 上方向のマージンを指定するmargin-right: 右方向のマージンを指定するmargin-left: 左方向のマージンを指定するmargin-bottom: 下方向のマージンを指定する
例えば、上に30pxのマージンを入れる場合は、次のようになります。
h1 {
margin-top: 30px;
}
パディング同様に、他にも”%”や”rem”などの単位を与えることができます。また、”auto”を指定することで、関連するプロパティによって自動的に値が設定されます。
逆にマージンの余白を無くす場合は、次のように0を指定します。
h2 {
margin-top: 0;
}
パディングと同様に、上下左右のマージンを一度に指定するプロパティがあります。
margin: 上下左右のマージンを一度に指定する
例えば、上下左右全てに30pxのマージンを入れる場合は、次のようになります。
h3 {
margin: 30px;
}
また、marginプロパティでも省略形が存在します。
margin: <top&bottom>px <right&left>px: 上下と左右のマージンを分けてそれぞれ指定するmargin: <top>px <right&left>px <bottom>px: 上と左右と下のマージンを分けてそれぞれ指定するmargin**: <top>px <right>px <bottom>px <left>px: 上下左右のマージンを全て分けてそれぞれ指定する
例えば、次のように使います。
p {
margin: 10px 20px;
margin: 10px 20px 30px;
margin: 10px 20px 30px 40px;
}🚨パディングとマージンを使う時の注意点
マージンの相殺
マージンが重なった場合、合計されるのではなく、相殺されるという仕組みがあります。
例えば、次のように2つの<h1>タグを用意し、上の<h1>タグにはmargin-bottom: 30pxを、下の<h1>タグにはmargin-top: 70pxを指定し、間に余白（マージン）を取ります。
.first {
margin-bottom: 30px;
}
.second {
margin-top: 70px;
}
この場合、直感的には30px + 70px = 100pxのマージンができるように思います。しかし、実際には70pxのマージンです。
この原因は「マージンの相殺」です。マージンが重なって指定された場合、単に足し合わせるのではなく、相殺されます。その結果、大きい方のマージンが適用されるため、今回は30pxより70pxが大きく、70pxが適用されます。
マージンを重ねて適用した場合、みなさんの意図した大きさとは異なるマージンができてしまう可能性があります。ぜひ、この点を注意してみてください。
上と下どっちに余白を作るべき？
上か下のどっちに余白を作るべきか迷う場面があります。
例えば、3つの段落（<p>タグ）が存在し、それぞれの間に余白を取りたい状況があるとします。この時、上と下のどっちに余白を作るべきでしょうか？
結論は「どちらでも良いが統一しよう」です。
上か下のどちらでも良いのですが、プロジェクトや作っているWebサイトなどでどちらかに統一しましょう。後々の修正や調整などが楽になります。
行間の調整はパディングやマージンではできない
文字と文字の間の幅である行間は、パディングやマージンではできません。
代わりに、line-height プロパティを使います。line-height プロパティの使い方を知りたい方は、記事「CSSで文字やテキストを装飾する方法をまとめてわかりやすく解説」を読むと3分で理解できるのでおすすめです。
💪パディングとマージンの応用パターン
デフォルトの余白をリセットする
実は、<h1>タグや<h2>タグには、デフォルトで余白が付いています。
このデフォルトの余白をパディングとマージンを使うことでリセットできます。その方法は次のように、ユニバーサルセレクタでパディングとマージンに0を指定することで実現できます。
* {
padding: 0;
margin: 0;
}
「ユニバーサルセレクタって何？🤔」という方は、記事「CSSセレクターとは何か、基本的な種類や書き方をわかりやすく解説」を読むことで理解できるのでおすすめです。
「中央寄せ」「右寄せ」をする
幅（width）を指定した後marginプロパティで左右にautoを指定することで、中央寄せを実現できます。
h1 {
width: 200px;
margin: 0 auto;
}
ここでは”auto”の指定で、空いている空間を左右均等に割り振ることで、中央寄せを行います。
同様に、幅（width）を指定した後margin-leftプロパティでautoを指定することで、右寄せを実現できます。
h1 {
width: 200px;
margin-left: auto;
}
ここでは”auto”の指定で、空いている空間を左いっぱいに入れることで、右寄せを行います。
🎉まとめ
パディングとマージンは、ウェブデザインにおいて非常に重要な要素です。paddingプロパティを指定することで、内側の余白であるパディングを調整できます。marginプロパティを指定することで、外側の余白であるマージンを調整できます。
みなさんは学んだことにより、自在にパディングやマージンを使って、意図する余白を作ったり、無くしたりできるようにスキルアップしました！素晴らしいです🎉
今後も使いこなすことで、ウェブページを美しく整然としたものに仕上げることができます。ぜひ活用してみてください。
