CSSを勉強していて、最初に少しつまずいたのが**「margin」と「padding」**でした。
どちらも余白を作るために使うので、
「marginとpaddingって、どっちも余白じゃないの？」
と最初は思っていました。
でも、実際にコードを書いて動かしてみると、marginとpaddingにはちゃんと違いがあることが分かってきました。
今回は、CSS初心者の私が実際に作っているプロフィールページを使って、marginとpaddingの違い・使い分け方をできるだけ分かりやすくまとめます。
これからHTML・CSSを勉強したい方や、Web制作で在宅ワークを目指している方にも参考になれば嬉しいです。
この記事で分かること
この記事では、CSS初心者向けに以下の内容を解説します。
- marginとpaddingの違い
- marginはどんなときに使う？
- paddingはどんなときに使う？
- borderとは？
- CSSのボックスモデルとは？
- 実際のHTMLにmargin・paddingを追加する方法
- marginとpaddingの使い分け方
marginとpaddingの違いは「余白ができる場所」
まず、一番大切なことから。
marginとpaddingの違いは、余白ができる場所です。
margin → 要素の外側
padding → 要素の内側
これだけでも覚えておくと、かなり分かりやすくなります。
イメージすると、こんな感じです。
margin（外側の余白）
┌─────────────────────┐
│ border（枠線） │
│ ┌───────────────┐ │
│ │ padding │ │
│ │ ┌─────────┐ │ │
│ │ │ content │ │ │
│ │ │ 中身 │ │ │
│ │ └─────────┘ │ │
│ └───────────────┘ │
└─────────────────────┘
つまり、
要素の外側に余白を作る → margin
要素の内側に余白を作る → padding
です。
marginとは？
marginは、HTMLの要素の外側に余白を作るCSSです。
例えば、カードとカードの間を離したいときなどに使います。
基本的な書き方
.card {
margin: 30px;
}
これで、.cardという要素の外側に30pxの余白ができます。
例えば、
┌────────────┐
│ カード① │
└────────────┘
┌────────────┐
│ カード② │
└────────────┘
このカード同士の間隔を作るときにmarginが活躍します。
marginを使う場面
- 要素と要素の間を空けたい
- 見出しと文章の間を空けたい
- カード同士の間隔を調整したい
- ページの上下左右に余白を作りたい
などがあります。
paddingとは？
paddingは、HTMLの要素の内側に余白を作るCSSです。
例えば、
.card {
padding: 20px;
}
とすると、カードの枠と中身の間に20pxの余白ができます。
イメージすると、
┌────────────────┐
│ │
│ ┌────────┐ │
│ │ 中身 │ │
│ └────────┘ │
│ │
└────────────────┘
この「枠と中身の間」がpaddingです。
paddingを使う場面
- 文字と枠の間を空けたい
- ボタンの中に余白を作りたい
- カードの中身をゆったり見せたい
- 画像や文章と枠線の距離を調整したい
などがあります。
marginとpaddingの違いを表で確認
ここで一度整理してみます。
| CSS | 余白ができる場所 | 使う場面 |
|---|---|---|
| margin | 要素の外側 | 要素同士の間隔を空ける |
| padding | 要素の内側 | 中身と枠の間隔を空ける |
迷ったときは、
外側ならmargin、内側ならpadding
と考えると分かりやすいです。
borderとは？
marginとpaddingを勉強していると、borderも出てきます。
borderは、要素の周りに枠線をつけるCSSです。
例えば、
.card {
border: 1px solid #333;
}
と書くと、カードの周りに1pxの枠線が表示されます。
今回のようにプロフィールをカード風にしたいときにも使えます。
実際のプロフィールページで試してみた
ここからは、私が実際に作っているプロフィールページを使って、marginとpaddingを試してみます。
現在のHTMLには、プロフィール部分として、
<section>
<img src="IMG_9638.jpg" alt="プロフィール画像" width="200">
<p>3児ママWeb制作者のgrillon-designです</p>
</section>
と書いています。
ここにCSSを適用するため、sectionにクラス名を追加します。
STEP1｜HTMLを変更する
以下のコードに変更します。
<section class="profile-card">
<img src="IMG_9638.jpg" alt="プロフィール画像" width="200">
<p>3児ママWeb制作者のgrillon-designです</p>
</section>
変更したのは、
class="profile-card"
を追加したところだけです。
これで、このプロフィール部分にCSSを指定できるようになりました。
STEP2｜CSSを書く
次に、style.cssに以下のコードを追加します。
.profile-card {
width: 300px;
padding: 20px;
margin: 30px 0;
border: 1px solid #333;
}
これだけでOKです。
それぞれの役割を見てみます。
width: 300px;
width: 300px;
プロフィールカードの横幅を300pxにしています。
padding: 20px;
padding: 20px;
カードの中身と枠の間に20pxの余白を作ります。
つまり、
padding＝内側
です。
margin: 30px 0;
margin: 30px 0;
カードの外側の上下に30pxの余白を作ります。
つまり、
margin＝外側
です。
ちなみに、
margin: 30px 0;
は、
- 上 → 30px
- 右 → 0
- 下 → 30px
- 左 → 0
という指定です。
border: 1px solid #333;
border: 1px solid #333;
カードの周りに1pxの枠線をつけています。
今回のCSSをまとめると
今回使ったCSSはこれです。
.profile-card {
width: 300px;
padding: 20px;
margin: 30px 0;
border: 1px solid #333;
}
まずは、このままコピペして試してみるのがおすすめです。
実際にブラウザで表示してみると、
「paddingを増やすと中身と枠の間が広がる」
「marginを増やすとカードの外側が広がる」
ということが目で確認できます。
CSSは、こうやって実際に動かしてみると一気に分かりやすくなります。
before
After
marginとpaddingを変更して違いを確認してみる
せっかくなので、数字を変更してみます。
例えば、
.profile-card {
padding: 50px;
}
としてみてください。
すると、カードの中身と枠の間がさらに広くなります。
今度は、
.profile-card {
margin: 80px 0;
}
としてみます。
すると、カードの外側の上下が広くなります。
このように、数字を変えてみるだけでもmarginとpaddingの違いを体感できます。
私も最初は「どっちも余白だからややこしい！」と思っていました。
でも、実際に数字を変えてみると、違いがかなり分かりやすかったです。
ボックスモデルとは？
marginとpaddingを勉強していると、**「ボックスモデル」**という言葉が出てきます。
CSSでは、HTMLの要素をひとつの「箱」として考えます。
これがボックスモデルです。
外側から順番に、
- margin
- border
- padding
- content
という構造になっています。
┌─────────────────────────┐
│ margin │
│ ┌───────────────────┐ │
│ │ border │ │
│ │ ┌─────────────┐ │ │
│ │ │ padding │ │ │
│ │ │ ┌───────┐ │ │ │
│ │ │ │content│ │ │ │
│ │ │ │ 中身 │ │ │ │
│ │ │ └───────┘ │ │ │
│ │ └─────────────┘ │ │
│ └───────────────────┘ │
└─────────────────────────┘
最初は少し難しく感じますが、
「HTMLの要素は箱」
と考えるとイメージしやすいです。
marginとpadding、どっちを使えばいい？
CSS初心者のうちは、ここで迷いやすいと思います。
そんなときは、
「どこの余白を増やしたい？」
と考えてみます。
カードと次の要素を離したい
→ margin
見出しとカードを離したい
→ margin
カードの枠と文字を離したい
→ padding
カードの枠と画像を離したい
→ padding
これだけ覚えておけば、最初は十分です。
marginとpaddingは上下左右に指定できる
marginとpaddingは、上下左右を個別に指定することもできます。
例えばmarginなら、
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
と指定できます。
paddingも同じです。
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
ただ、最初から全部覚えようとすると大変なので、まずは、
margin＝外側
padding＝内側
を覚えておきたいと思います。
CSS初心者こそ「実際に手を動かす」
今回marginとpaddingを勉強してみて感じたのは、CSSは実際にコードを書いてみることが大切ということです。
動画や本を見て、
「なるほど、分かった！」
と思っていても、いざ自分でコードを書くと、
「……あれ？どっちだっけ？」
となることがあります。
私もまさにそうでした。
でも、
padding: 20px;
と書いてブラウザを確認して、
「中身と枠の間が広がった！」
と実際に見ることで、少しずつ理解できるようになってきました。
分からなかったら、
書く → 表示する → 確認する → 修正する
この繰り返し。
これからもこの方法で勉強していきたいと思います。
在宅ワークを目指してWeb制作を勉強中
私がWeb制作を勉強している理由のひとつは、将来的に在宅ワークにつながるスキルを身につけたいからです。
子育てをしながら働くことを考えると、
「自宅でできる仕事があったらいいな」
と思うことがあります。
そこで、未経験からHTMLやCSSを勉強し始めました。
もちろん、まだまだ分からないことばかり。
今回のmarginとpaddingも、最初は「どっちも余白でしょ？」という状態でした。
それでも、ひとつずつ勉強していくと、
「昨日は分からなかったことが、今日は少し分かる」
という瞬間があります。
その小さな積み重ねを大切にしながら、Web制作のスキルを身につけていきたいと思っています。
これからWeb制作を始める方も、最初から全部覚えなくて大丈夫。
分からないところをひとつずつ解決していけばOKです。
今日の学びまとめ
今回学んだことをまとめます。
margin
要素の外側の余白
margin: 30px;
padding
要素の内側の余白
padding: 20px;
border
要素の周りにつける枠線
border: 1px solid #333;
ボックスモデル
HTMLの要素を「箱」として考えるCSSの基本的な考え方。
margin
↓
border
↓
padding
↓
content
まずは、
外側＝margin
内側＝padding
これを覚えておけば大丈夫です。
10日目を終えて
100日チャレンジも、今日で10日目です。
HTMLやCSSを勉強し始めたばかりなので、まだまだ分からないことがたくさんあります。
「こんな基本的なことでつまずくの？」
と思うこともあります。
でも、初心者だからこそ、
分からない → 調べる → 実際にやってみる → 分かる
という経験をひとつずつ積み重ねることが大切なのかなと思っています。
今回のmarginとpaddingも、最初はよく分かりませんでした。
でも今は、
「外側ならmargin、内側ならpadding」
と少しずつ理解できるようになりました。
10日目。
まだまだ先は長いですが、焦らずコツコツ続けていきます。
Web制作のスキルを身につけて、いつか在宅ワークにつなげる。
その目標に向かって、100日チャレンジを頑張ります。
同じようにWeb制作を勉強している方や、在宅ワークを目指している方の参考になれば嬉しいです。
コメント