1. TOP
  2. html&CSS入門
  3. CSSでボックスに余白を設定しよう! マージンとパディングの違いについても解説

CSSでボックスに余白を設定しよう! マージンとパディングの違いについても解説

WEBサイトにおいて余白はとても重要です。コンテンツ同士に余白がないと、ごちゃごちゃして見え、ユーザーに読む気を失わせます。

ユーザーが読みづらい文章はどんなにいい内容を書いていても伝わらないですし、ユーザーがサイトを読んでいる時間(滞在時間)が減ることで、SEO的にもサイトの評価が下がることに繋がります。

左は余白がなさすぎて詰まったように感じる。

適切な余白をとって読みやすいサイトを目指しましょう。

CSSの余白について

余白には2つ種類があります。要素の内側の余白を指定するパディングと、要素の外側の余白を指定するマージンです

全ての要素は2種類の余白をもつ

html文書内の要素は下記のように、2つの余白領域とボーダー領域を持っています。(ボックスモデルと言います。)

※図解

ボックスモデルの仕様

  • コンテンツ領域
    文字や画像などの実際のコンテンツ部分。widthやheightは、このコンテンツ領域の横幅と高さになります。
  • パディング領域
    ボーダーより内側の余白。背景色を設定した場合、この領域も反映されます。
  • ボーダー領域
    ボーター(境界線)を引くための領域です。
  • マージン領域
    ボーダーより外側の余白。背景色は塗られません。

全ての要素は、上記のようなボックスモデルの領域を持っています。

色々と覚えるのが大変ですが、一番大切なことは、「余白は2種類あって、ボーダーより内側をパディング、ボーダーより外側をマージンで指定する」ということなのでこれだけは覚えておきましょう。

実際にマージンとパディングを使ってみよう

実際にマージンとパディングの例を見てみましょう。

01.余白なしの状態

<p class='demo_26'>わんだふるなアンダスタンドを!</p>
.demo_26{
    background-color: #e6fff2;
    border:1px solid #1c883e;
    width: 500px;
 }

わんだふるなアンダスタンドを!

わかりやすいように背景色をとボーダーも設定しています。余白を設定しない場合はこのように表示されます。境界線と文字がくっつきすぎて読みづらく感じます。

02.パディングを設定

パディングを設定してみましょう。

<p class='demo_27'>わんだふるなアンダスタンドを!</p>
.demo_27{
    background-color: #e6fff2;
    border:1px solid #1c883e;
    width: 500px;
    padding: 20px;
 }

わんだふるなアンダスタンドを!

今回はパディングを20pxに設定しました。ボーダーの内側に20pxの余白ができ、背景色が塗られているのがわかります。

03.マージンを設定

今度はマージンを設定してみましょう。

<p id='demo_28'>わんだふるなアンダスタンドを!</p>
#demo_28{
    background-color: #e6fff2;
    border:1px solid #1c883e;
    width: 500px;
    margin: 20px;
 }

わんだふるなアンダスタンドを!

ボーダーの外側に余白ができたのがわかると思います。マージン部分は要素の外側の余白なので、背景色は塗られないのが特徴です。

04.パディングとマージンを組み合わせて使う

マージンとパディングは組み合わせて使ってみましょう。

<p id='demo_29'>わんだふるなアンダスタンドを!</p>
<p>ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文</p>
#demo_29{
    background-color: #e6fff2;
    border-bottom:2px solid #1c883e;
    padding: 20px;
    margin-bottom:20px;
 }

わんだふるなアンダスタンドを!

ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文ここから本文

パディングを広めに取り、背景色とボーダーを使うことでタイトルっぽいスタイルにしていします。そして、本文との距離を少し話すためにマージンのボトムを指定してします。

このように実際に使うときはマージンとパディングをうまく組み合わせて使っていくことになります。

マージンやパディングの使い方

マージンやパディングは、上下左右の4方向の余白を指定することができます。

1方向ずつ指定する場合や、4方向同時に指定する方法など書き方にバリエーションがありますので紹介していきます。

一つずつ指定

一番簡単な書き方です。それぞれの方向に対して一つずつ指定していきます。

  • 上だけ指定…margin-toppadding-top
  • 下だけ指定… margin-bottompadding-bottom
  • 左だけ指定… margin-leftpadding-left
  • 右だけ指定… margin-rightpadding-right

例えば上方向にマージンを20px、右側に30px取りたい場合は下記のように書きます。

margin-top: 20px;
margin-right: 30px;

1行にまとめて指定

下記のように一行にまとめて書くこともできます。

margin: 20px 10px 5px 0px

これは、4方向のマージンを、上、右、下、左の順で半角スペース区切りで指定できます。

上から始まって時計周りと覚えておきましょう。だいぶすっきりと書くことができますね。

1つ指定で4方向全てに適用

1つだけ指定すると、4方向全ての余白が同じになります。4方向全ての余白が同じなら1回書くだけOKです。

margin: 10px;

上記は下のように書くのと同じ意味になります。※パディングも同様です。

margin: 10px 10px 10px 10px;

2つ指定で「上下」と「左右」に適用

2つ指定すると「上と下」が一緒で、「左と右」が一緒の余白になります。

例えば、上下の余白が10pxで、左右は50px取りたいという場合は、下記のように書くことができます。

margin: 10px 50px;

上記は下のように書くのと同じ意味になります。※パディングも同様です。

margin: 10px 50px 10px 50px

3つ指定で「上」と「左右」と「下」に適用

3つ指定すると「上」と「左と右」と「下」にそれぞれ適用されます。

上と下はバラバラの余白だけど、左右の余白は同じという場合に使われます。

margin: 0 50px 20px;

上記は下のように書くのと同じ意味になります。※パディングも同様です。

margin: 0 50px 20px 50px;

マージンやパディングの単位について

マージンとパディングの指定には、pxといった単位を使います。

基本はこの記事で見てきたようにpxで指定しますが、で指定するケースも少なくないので覚えておきましょう。

余白を%で指定する方法

余白をで指定した場合は、親要素の横幅に対しての割合になります。

例えば親要素が横幅500pxの場合、marginを10%にすると余白は50pxになります。margin-toppadding-topのような垂直方向の余白でも、基準となるのは親要素の横幅になります。

基本的な使い方としては、横幅70%、マージン10%、パディング20%というふうに、トータルが100%になるようにして使います。

注意しなくてはならないのが、を使う場合は、パディング・マージン・横幅が全て一貫してで指定する必要がある点です。

そうしなければ、横幅のトータルを100%にならないからです。そうなると、要素がはみ出してしまったり、逆に余計な余白ができてしまったりしてしまうので注意しましょう。

%はどんな時に使うのか?

はパソコンやスマホに対応するレスポンシブデザインの場合などによく使われます。

パソコンなどの大きな画面で見た時は左右のマージン30pxくらいでちょうどよくても、小さいスマホの画面で見ると、余白が広すぎるということはよくあります。

そんな時に例えば、余白を「3%」で指定しておけば、親要素が1000pxの時には30pxの余白、500pxであれば15pxの余白と、適度な余白が設定されることになります。

いろんなデバイスに対応するためのテクニックとしてを使うケースがあるということを覚えておきましょう。

マージンはautoで指定ができる

マージンはautoという値を設定することもきます。

マージンの左右にautoを設定するとセンタリング、つまり真ん中に揃えることができます。

このセンタリングのテクニックはよく使われので覚えておくと便利です。

<p id='demo_30'>わんだふるなアンダスタンドを!</p>
#demo_30{
    background-color: #e6fff2;
    border:1px solid #1c883e;
    width: 250px;
   margin: 0 auto;
 }

わんだふるなアンダスタンドを!

注意点としては、センタリングする要素の横幅を指定していなければ効果がないという点です。横幅を指定していなかったり、要素の横幅を指定できないインライン要素などには効果がありません。

ちなみに上下にautoを設定した場合は「0」を設定したのと同じことになります。

マージン、パディングの注意点

マージン、パディングはCSSを使う上では欠かせないプロパティですが、ちょっとした癖があります。これを知らないでいると、CSSが思ったように効かなくて頭を悩ませることになるので、覚えておくとよいでしょう。

インライン要素には注意

pタグやh1のようなブロック要素については特に注意することはないのですが、spanのようなインライン要素については注意が必要です。

インライン要素は仕様上、高さや横幅を指定することができません。

また、上下のマージンやパディングも効果がありません。(設定しても見た目が変わりません。)

上下のマージンやパディングを変えたい場合は、displayinline-blockにするなどの対応を行う必要があります。

なお、左右のパディングやマージンは適用されます。

マージンの相殺に注意

マージンは特殊な仕様になっていて、垂直方向のマージンが重なり合う部分は相殺されて、どちら大きいマージンを持つ方の分だけが反映されます

例えば、二つのpを配置して試してみましょう。

マージンの相殺の例

<p id='demo_31-1'>下にマージン50px</p>
<p id='demo_31-2'>上にマージン40px</p>
#demo_31-1{
    margin-bottom: 50px;
 }

#demo_31-2{
    margin-top: 40px;
 }

下にマージン50px

上にマージン40px

上のp要素は下方向に50pxのマージン、下のp要素には上方向に40pxのマージンを設定します。

この場合、普通に考えると余白は90pxになりそうですが、実際には50pxの余白になります。

これは垂直方向のマージンで重なり合う部分が相殺され、大き方のみが適用されたためです。この場合は50pxの方が大きいのでそちらが適用されます。

親子要素でのマージンの相殺

同様に、親子要素でもマージンの相殺起こります。

親要素と最初の子要素、もしくは親要素と最後の子要素で同じ方向のマージンを設定した場合、子要素のマージンがはみ出してしまうことになります。

この現象は、親要素にパディングやボーダーを設定することで防ぐことができます。

なんかおかしいな?と思ったらマージンが相殺されていないか確認してみましょう。

ちなみに、パディングでは相殺は起こりませんので、パディングとうまく組み合わせて余白を取るようにするのも1つの手です。

まとめ