creatersnest201

【CSSでの余白デザイン】marginとpaddingの正しい使い方


CSSを覚え始めると、ちょっとややこしいのがmarginとpaddingです。
どっちも余白なんだけど、どっちをどんな風に使えばいいんだろう?
そんなことを悩むことが多いでしょう。

ええい!どっちか入れて見ればわかる!
とりあえずやってみながらああでもない、こうでもない…とやっていませんか?

正しい使い方さえ身につければ、無駄な手間が省けます。
この際しっかり身につけて、スムーズにCSSを書けるようにしましょう。

ブロック要素のmarginとpadding初期設定

HTMLを学習し始めたとき、H1タグの見出しやPタグの段落を使ってみて、
「あれ?ちょっと想像していたのと違う」と感じませんでしたか?

”初めて”見たときは感動したものの、レイアウトをいじり始めると
すき間があいてしまって「思った通りにいかない」と感じたことがあるはずです。

各ブラウザーでは、最初からブロック要素にmarginやpaddingの初期値が
設定されていて、それぞれのブラウザー初期値が違っている上に、
ブロック要素ごとにも違います。

そこで、自分の思い通りに設定するために、
初期値をいったん「0」にしてから、改めて表示したいCSSを設定してみます。

marginとpaddingの初期設定をリセットする

marginとpaddingを一言でいうと「見栄えのためにとる余白」のことです。
しかしその「余白の取り方」によって、それぞれ違ってきます。

実際に表示しながら見ていきましょう。
デスクトップなどに新しいフォルダーを作り、その中に、下記のソースのHTMLと
CSSのファイルをエディターで作成して保存します。

[test.html] [style.css] ファイルの保存ができたら、test.htmlをブラウザーで開いてみましょう。

ブロック要素の初期設定状態

これだけなら違和感はないのですが、見出し1の上や段落との間、左側にも
余白がみられます。

では、いったんこの余白を全て0にしてみましょう。
style.cssをエディターで開き、CSSソースを下記のように追加して保存します。

test.htmlを改めてブラウザーで開くか更新してみると、どうでしょうか。

余白が詰まった状態のブロック要素
さきほど余白がみられた箇所がだいぶ詰まっていますね。

しかし!それでもまだ左端や上部にもうちょっと余白がみえます。

ブロック要素の見出し1や段落の余白には0を指定していますが、
実はbody要素にも「余白」が存在します。

そこで、CSSファイルでbodyも「0」にしましょう。

ブラウザーで確認してみましょう。

余白が全て詰まったブロック要素

ぴったり余白がなくなりましたね!
ただ、ブロック要素同士の間隔がわかりにくいので、ブロック要素の幅を決めて、
それぞれに背景色をつけておきます。

style.cssをエディターで開き、下記のように追加します。

すると、test.htmlは以下のような状態になります。

背景色がついたブロック要素

ブロック要素に背景色が付いたのでわかりやすくなりましたね。
これで準備が整いました!

次からいよいよmarginやpaddingを使ってみましょう。

paddingを設定する

では、paddingを設定します。
下記のstyle.cssのように見出し1には7px、段落には15px設定しましょう。

test.htmlを確認すると、

padding数値を指定したブロック要素

背景色のついた「内側」に、上下左右それぞれに余白がついているのがわかりますね。
つまりpaddingは、「要素の内側」につける余白なのです。
上下左右別々に違うpadding設定をすることもできます。

単体で指定する場合は以下の4つを使います。

上に余白:padding-top
下に余白:padding-bottom
左に余白:padding-left:
右に余白:padding-right:

また、paddingにピクセル指定を複数指定することで、一括指定もできます。

例1)ピクセル指定を4個入れた場合
padding: 5px 10px 15px 20px; /*上5px、右10px、下15px、左20px*/

例2)ピクセル指定を3個入れた場合
padding: 5px 10px 15px;  /*上5px、左右10px、下15px*/

例3)ピクセル指定を2個入れた場合
Padding: 5px 10px;  /*上下5px、左右10px*/

一括指定で余白を「なし」にしたい場合は「0」として入れるだけです。
例)padding: 5px 0 0 20px; /*上5px、右と下は0、左20px*/

marginを設定する

先ほどまで使っていたstyle.cssのpadding設定を、marginに変更してみます。

ブラウザーで確認してみると、

marginを設定したブロック要素

左上の角から余白が入り、かつ、見出し1と段落ではmarginのサイズも違うので、
見た目もずれているのがわかります。

また、paddingと同じように上下左右別々に設定することも可能です。

上:margin-top
右:margin-right
下:margin-bottom
左:margin-left

paddingと同様、一括指定もできます。

このあたりは既に説明しているので、割愛します。

marginとなった余白の部分を図解にすると、下のようになります。
marginの図解

赤の部分、緑の部分がmarginとしてついた余白です。
ですが、よく見てみると見出し1と段落の間のマージンがちょっと重なっているのが
わかりますか?

marginには「上下に隣り合っているmarginは相殺する」という特性があるのです。
「あれ?marginが効かない!」という場面はたいていこういうことだったりします。
「marginとpaddingがよく理解できない。難しい」となる原因のひとつですね。

margin同士が上下で設定されている場合、大きな数値のほうを優先して表示されます。
見出し1のマージンが7px、段落のマージンが15pxなので、
大きい数値である段落のマージン15pxが優先されています。

このようにmargin同士が重ならないよう、要素のどちらかのマージンとして
統一しておくのが得策です。

例えば、先ほどの例では7pxと15pxなので合計22pxを、
見出し1のmargin-bottom(要素の下に追加する余白)として表示するか、
段落のmargin-top(要素の上に追加する余白)のどちらかに設定しておくと
いいでしょう。

Web設計の段階で、marginまわりをきちんと計算しておきましょう。

margin:autoを使ってブロック要素を中央に揃える

marginを使って、要素をブラウザーの中央に寄せる方法もあります。
下記のようなtest2.htmlとstyle2.cssを作って表示してみましょう。

[test2.html] [style2.css] test2.htmlをブラウザーで確認してみると、

margin:autoを使ったセンタリング

段落が、上に15pxのマージンでブラウザー画面の左右中央にきていますね。
段落の要素に、margin:15px auto;を入れているのがポイントです。

上部にぴったりくっつけたい場合にはmargin:0 auto;にしましょう。
ただし、「中央に寄せたい要素の幅」を設定していないと効かないので注意が必要です。

まとめ

marginは「要素の外側の余白」、paddingは「要素の内側の余白」。
この2つのポイントを押さえておけば、あとは要領をつかめて
さくさく作れるようになること間違いなしです。
レイアウトがうまくいかない、変な余白が入るといった場面にでくわしたら、
まずはmarginとpaddingの設定を疑ってみましょう。
両方を一旦「0」にしてから片方ずつ試してみることをおすすめします。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【少しのコードでリッチに!】CSSでシャドウをかける方法を教えてくれる記事15選