paddingとmarginは何が違う？特徴と使い方のポイントを紹介！

paddingとmarginが余白を設定するプロパティだとなんとなく分かっていても、何が違うか分からないという人もいるのではないでしょうか。HTMLで文書構造を作り、CSSでＷebサイトの全体的なバランスとデザインを付け加えれば、誰でも見やすいＷebサイトとなりますよね。paddingとmarginはともに余白を設定するプロパティですが、役割が大きく違います。paddingとmarginのどちらのプロパティを、正しく使い分けることができれば、美しいデザインを作ることができます。

今回は、混同されがちなpaddingとmarginの違いと、記述方法、使い方のポイントについて紹介します。

paddingとmarginの違い

paddingとmarginが、どちらも余白を指定するCSSのプロパティだということは分かっても、非常に多くの方が混同してしまっています。しかし実は、paddingとmarginがいったいどこの余白を設定しているかは図にすれば簡単に理解できます。今回は図と照らし合わせてわかりやすいように、「こんにちは」という文字の入っている要素の背景色をグレー（カラーコード：#cccccc）にしています。

こんにちは

HTMLとCSSは以下のようになっています。

HTML

CSS

pタグやdivタグなど、HTMLの要素には箱の形になっている種類があります。これらをブロック要素といいます。この例の場合、pタグという箱の中に「こんにちは」という文字が入っています。

よく見ると「こんにちは」という文字と、箱の境界線の間には余白があり、見えませんが、箱の外側にも余白を付けることが可能です。

では、図で確認しましょう。

このように、「こんにちは」という文字と、箱の境界線の間の余白はpadding、箱の外側の余白がmarginになっていますよね。paddingは要素の内側の余白、borderは要素の枠線、marginは要素の外側の余白を指定するプロパティです。

paddingとは

paddingとは、テキストコンテンツ自体とテキストコンテンツの境界線、つまり文字と境界線の間の余白です。上の例では、「こんにちは」という文字と黒いborderの間の余白です。

marginとは

marginとはテキストコンテンツの境界線の外側の余白を指定するプロパティです。ボックスとボックスの間に余白をつける際に使われます。

paddingとmarginの記述方法

paddingとmarginの記述方法には、上下左右の余白の数値を指定する際に気をつけるべきルールがあります。paddingとmarginの記述方法はほぼ同じです。

paddingの記述方法

paddingは、上下左右の内容ボックスの内側の余白を一括で指定するプロパティです。paddingに関する記述方法は4つあります。

①上下左右のpaddingを4つまとめて指定する場合

上2px、下3px、左4px、右5pxのpaddingをつけるための記述方法は、以下のように、上から時計回りの順番で記述します。

②上下、左右のpaddingをそれぞれ指定する場合

上下同じpaddingの値、左右同じpaddingの値を指定する場合は、上下・左右のそれぞれの数値を2つ記述することで指定することができます。上下のpaddingを4px、左右のpaddingを2pxにする場合、以下のように記述します。

③上下左右に同じ値のpaddingを指定する場合

上下左右のpaddingの値をすべて同じ値にする場合は値を1つ書くことで指定できます。上下左右のpaddingを10pxにする場合、以下のように記述します。

④上下左右のpaddingを個別に指定する場合

paddingには、上下左右のpaddingを別々に指定する4つのプロパティがあります。padding-topで上のpaddingを指定、padding-bottomで下のpaddingを指定、padding-leftで左、padding-rightで右のpaddingを指定することができます。

marginの記述方法は、paddingと同じく4つの方法があります。

上下左右のmarginを個別に指定する場合は、上のmarginを指定する「margin-top」、下のmarginを指定する「margin-bottom」、左のmarginを指定する「margin-left」、右のmarginを指定する「margin-right」でpaddingの値を記述します。他の3つの記述方法はpaddingと同様です。

paddingとmarginのルール

paddingやmarginには、CSSの記述をしていく上で知っておくべきルールがあり、注意が必要です。

インライン要素にはpadding・marginが効かない

余白をつけるプロパティであるpaddingとmarginですが、インライン要素には注意が必要です。インライン要素とは、箱のようなイメージを持つブロック要素とは違い、線のようなイメージです。たとえば、aタグやspanタグ、imgタグがインライン要素にあたります。paddingは、インライン要素には上下左右の余白を指定することはできますが、上下のpaddingは、上下にある他のボックスの領域にはみ出してしまい、見た目の上では余白がつきません。

marginは、左右の余白を指定することはできますが、そもそも上下の余白の指定ができず、左右にしかmarginを適用することができません。

paddingはボックス自体の大きさも変える

ボックスに対してpaddingを設定すると、ボックス自体の大きさが変わってしまいます。何なぜかと言うと、paddingはボックスの内側の余白が対象のため、paddingを大きくすると、ボックス自体の大きさも大きく変わるからです。

下の図で説明します。

上の2つのボックスのうち、右のボックスにのみpaddingをつけてみます。

右のボックスと左のボックスの上下の大きさが変わりましたよね。paddingをあるボックスに適用すると、ボックスの実際の高さや幅も、適用したpaddingの分だけ大きくなります。そのため、今回のように複数あるボックスのうち、1つのボックスにだけpaddingで余白を適用した場合、他のボックスよりもボックス全体の高さや幅が大きくなってしまいます。ですので、横幅はwidthとpaddingを足した合計、高さはheightとpaddingを足した合計となり、計算しなければいけません。

marginはマイナスの値を指定することができる

marginは、値にマイナスの数値を指定することができ、ネガティブマージンとも呼ばれます。たとえば、margin-topにマイナスの値を指定した場合、margin-bottomがmargin-topで指定した数値の分、上に引っ張られます。ネガティブマージンを使用することで、画面いっぱいにボックスを表示することが可能です。

上下に結合しているボックスはmarginが相殺される

上下に結合されているボックスのtopとbottomにそれぞれmarginの値を指定すると、各値の合計値分marginされずに、各値のうち大きい方の数値が適用されます。これをmarginの相殺といいます。

また、親要素のmargin-topと子要素の1つ目のmargin-topでも相殺が起きます。親要素の上にある他のボックスにmarginの指定がない場合、子要素の1つ目、つまり親要素の上辺にある子要素に指定されているmargin-topの数値と、親要素に指定されているmargin-topの数値のうち、大きい方の数値が適用されます。同じように、親要素と末尾の子要素のmargin-bottomの数値でもmarginの相殺が起きます。

まとめ

今回はpaddingとmarginの違いと記述方法、特徴的なルールを紹介しました。ボックスとボックスの間に適切な余白をつけることで、誰にとっても見やすいWebサイトを作ることができます。paddingとmarginの特徴的なルールに注意することは、それぞれの良さを生かしたコーディングのための第一歩となるでしょう。

WebMediaでは、この記事の他にもHTMLやCSSのコーディングのヒントとなる情報を発信しています。ぜひチェックしてみてください。

また、Web担当になったけれど自分の知識に自信がない、自社のWebページをもっと改善したい、けれども、うちにはそんな時間も人材もないというお悩みはございませんか？

WebMediaを運営するITRAではお客様に真摯に向かい、ご要望に沿ったWebサイト制作やリニューアルを行ってきました。お気軽にお問い合わせください。