【初めてのCSS】paddingとは?marginとは?使い方を丁寧に解説する

こんにちは!フロントエンドエンジニアのコン太です!!

この記事では、CSSの勉強を始めて最初につまずくポイントであるmargin(マージン)padding(パディング)を解説します

余白を作るCSSにはpaddingとmarginがあるらしいけど、何が違うのか全然分からないな。どんな時にはpaddingを使って、どんな時にはmarginを使うのかな?誰か丁寧に教えてくれぇぇぇ!!

この記事を読むとこんな事が分かるようになります

この記事で分かること
  • そもそもmargin・paddingとは何か
  • どうやって使い分けるのか
  • margin・paddingが効かない時の対処法

最初につまずくポイントと言っても、marginとpaddingはそう難しい内容ではありません

この記事をじっくりと読み込めばすぐに理解できるようになります

1. 事前準備:ブロックについて知ろう!

marginとpaddingを説明する前に、Webサイトがどうやって構成されているかを知る必要があります

さっそく図を使って分かりやすく解説していきます!!

1-1. Webサイトはブロックで構成されている

marginとpaddingの説明をする前に、Webサイトがどうやって構築されているか軽く知っておきましょう

Webサイトは細かいブロックで構成されていて、ブロックの中に文章や写真が入っています。CSSでブロックを並べてサイトをレイアウトします。

CSSで何もデザインしなければ、ブロックは縦に積まれていきます

CSSで横に並べたり隙間を空けたりする事で、見やすいWebサイトを制作できます

1-2. ブロックについて

ブロックのエリアは、中身の大きさによって変わります

中身が画像ならブロックのエリアは画像サイズと同じですし、中身が文字ならブロックのエリアは文字の大きさと同じです

ブロックのエリアには境界線があります。境界線はブロックを囲う最小の四角形です。

2. paddingとmarginを徹底解説

marginとpaddingを一言で説明すると、余白を調整するCSSです

しかし、marginとpaddingとでは、調整できる余白の場所が違います

  • padding:要素の内側の余白
  • margin:要素の外側の余白

これだけでは理解できないと思うので、図を使って詳しく解説していきます

2-1. paddingで調整する余白とは

paddingは境界線を広げる事でブロックを大きくすることができます

paddingは境界線を広げる事ができます。中身のサイズは変わりませんが、境界線が広がるのでブロックが大きくなります。境界線の内側はブロックの内側と認識されます。

文字を囲う境界線に色を塗った場合を例に上げます

paddingなしは文字スレスレの位置に境界線がありますが、paddingありは文字と境界線に隙間があります。隙間がある方がデザインとしてスッキリしていますね。

つまり、paddingは境界線の内側に余白を作るCSSという事です

2-2. marginで調整する余白とは

marginは境界線の外側に空白エリアを作ることができます

空白エリアとは文字通りなにも存在しないエリアの事です。空白エリアには他のブロックが入ることができません。

空白エリアには他のブロックが入る事ができないため、ブロック間の余白を作るときにmarginはよく使われます

周りのブロックは空白エリアには入ってこれないので、ブロック間に余白が生まれます

3. margin・paddingが効かない時の対処法

marginとpaddingが効きません。どうしたらいいでしょうか?

CSSに『display: block;』と書けば治るよ!

これはよくあるミスです。僕もうっかりしてるとコレやっちゃいます(笑)

対処法を詳しく解説していきます

3-1. 無効化される原因の解説

復習になりますけど、marginとpaddingはブロックの境界線を拡大したり、ブロックの周りに空白エリアを作ったりできますよね。つまり、marginとpaddingはブロックの周囲を操作するCSSと言えます

言い換えれば、ブロックがないとmargin・paddingの効果が発揮されないのです

HTMLの要素の中には、初めからブロックとして扱われる要素(ブロックレベル要素)とブロックとして扱われない要素(インライン要素)が存在しています

margin・paddingはブロックレベル要素には効果がありますが、インライン要素には効果がありません

コン太

インライン要素はブロックがないので無効なのは当然ですね

3-2. 解決策

インライン要素である事が無効化の原因なので、インライン要素をブロックレベル要素に変更するCSSを記述すれば解決できます

インライン要素をブロックレベル要素にするCSSはこれです

コード
display: block;

このCSSをmarginやpaddingと書いてある部分に付け足せばOKです!!

もし付け足してもダメなようなら、ブロックが大きすぎる可能性があります。widthやheightでブロックの大きさを定義すると上手くいくかもしれません

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です