【CSS】3分で理解できる！padding/margin講座【図解】

本ページでは、ページ全体の「余白」を指定できるpaddingとmarginの使い方を解説します。paddingとmarginを適切に利用することで、ページ全体の情報量を適切に制御できるようになります。

パッと見で文字や画像が詰め込まれすぎているように感じるページ。適切な情報量で「余白の美」がうまく使われているページ。両者の違いは、本ページで解説するpadding/marginプロパティを適切に利用できているかどうかの違いです。

初心者の方は、ここで挫折してしまう人も多いのですが、実は使い慣れてくると全く難しくはありません。

このページで学べる内容

【おさらい】CSSとHTMLの基本文法/意味と使い方・書き方
padding(パディング)プロパティとmargin(マージン)プロパティとは何か？
paddingとmarginの違いは何？
実際に、paddingとmarginを使ってみる！

HTML/CSSを学習中の方や、デザイナーを目指す方であれば絶対に知っておきたい内容ばかりですので、是非最後までご覧ください。

【おさらい】CSSとHTMLの基本
1. HTMLの基本―タグと要素
2. CSSの基本
paddingとmaginとは？
paddingの使い方
marginの使い方
上下左右を別に指定する方法
HTML/CSSを体系的に学びたい方は

【おさらい】CSSとHTMLの基本

「HTMLタグ」「属性」「プロパティ」という単語を聞いてピンと来た方は、この章は読み飛ばしていただいてOKです！

paddingとmarginを３分で理解できるよう、CSSとHTMLの基本知識からおさらいします。

HTMLの基本―タグと要素

HTMLはテキストをタグで囲みます。タグは囲んだ部分に意味付けを行う役割を持ちます。タグで囲むことで、コンピュータは囲んだ部分を「段落」や「見出し」「リンク」などと認識することができます。

タグで囲んだ部分全体を「要素」と呼びます。

HTMLについて丁寧に復習したいという方はこちらの記事をご覧ください。

CSSの基本

HTMLの各要素の色や形を変える（デザインを変更する）役割を担うのが、CSS（Cascading Style Sheet）の役割です。CSSの基本構造は「①どの要素の」「②どの部分を」「③どのように変えるか？」という３つの情報から成り立ちます。

「②どの部分を」の情報をCSSでは「プロパティ」と呼びます。

CSSを１から復習したいという方はこちらの記事をご覧ください。

paddingとmaginとは？

paddingとmarginは、どちらもCSSで指定することができるプロパティの一つです。

paddingとmarginはそのプロパティの中で「指定した要素の余白を指定する」役割を担っています。さて、要素の余白とは何でしょうか？

前提として、HTMLのブロック要素には必ず表示領域とは別に、余白部分が存在します。この余白が存在するからこそ、文章の段落と段落の間にスペースができるのです。

そして、この余白をさらに詳しく分解すると、「内側の余白」と「外側の余白」に分けることができます。

この余白の部分を表しているのがpaddingとmarginプロパティです。なぜ、１つのブロックに余白が２つも存在するか？これは、実際にCSSを使ってデザインをしていく中で何となくわかっていくようになりますので、今は一旦そういうものであると理解しましょう。

この、内側の余白を決めるのが「padding（パディング）」で、外側の余白を決めるのが「margin（マージン）」です。

paddingとmarginの違い

padding　　⇒　　内側の余白を示す
margin　　 ⇒　　外側の余白を示す

CSSでそれぞれの余白の大きさを変えたい場合は、padding/marginを指定することで可能になるのです。

※インライン要素とブロック要素についてさらに詳しく知りたいという方は、以下の記事をご覧ください。

paddingの使い方

ここからは、より実践的に具体的なコードを見ながらpaddingの使い方を学んでいきましょう。実際のコードと、その結果を実際に見ることでより鮮明にpaddingとmarginの使い方が分かるようになるはずです。

まずは、paddingを100pxで指定した場合から確認していきます。（ここでは、説明を簡易化するため、HTMLファイルのheadタグにstyleタグをネストする形でCSSを記述しています。）

<head>
 <style>
  p {
      border: solid 2px #0000ff;
      padding: 100px;
  }
 </style>
</head>
<body>
 <p>表示領域</p>
</body>

５行目で、段落（pタグ）に対して、paddingプロパティを指定しています。上記のHTMLファイルをブラウザで表示させた結果がこちらです。表示領域に対して、かなり大きめの余白ができていることが分かります。

この状態から、paddingプロパティの役割が分かりやすいようにpaddingを0px（余白０）に指定してみます。

<head>
 <style>
  p {
      border: solid 2px #0000ff;
      padding: 0px;
  }
 </style>
</head>
<body>
 <p>表示領域</p>
</body>

その結果がこちら。

ご覧のように、内側の余白が完全になくなりました。（右側の余白が大きくなっているのは、後から説明します。）paddingによって、余白を調整する様子が見て取れたかと思います。

続いては、margin（外側の余白）の調整方法を見ていきましょう。

marginの使い方

marginの動きがよくわかるように、段落を１つ増やします。また、paddingは20pxとしています。

まずは、marginを0pxとしてみましょう。

<head>
 <style>
  p {
      border: solid 2px #0000ff;
      padding: 20px;
      margin: 0px;
  }
 </style>
</head>
<body>
 <p>表示領域①</p>
 <p>表示領域②</p>
</body>

こちらを、ブラウザで表示した結果がこちらです。

marginを100pxに変更してみます。

<head>
 <style>
  p {
      border: solid 2px #0000ff;
      padding: 20px;
      margin: 100px;
  }
 </style>
</head>
<body>
 <p>表示領域①</p>
 <p>表示領域②</p>
</body>

ブラウザで表示した結果はこちらです。

表示領域①②の間のスペースが大きくなったことが分かるかと思います。

これで、paddingとmarginの使い方はOKです！

上下左右を別に指定する方法

paddingとmarginは、上下左右を別々に余白の大きさを指定することも可能です。上下左右を別々に指定したい場合は、padding/marginにtop/bottom/right/leftを付け加えて指定します。

padding-top	上の余白
padding-bottom	下の余白
padding-right	右側の余白
padding-left	左側の余白

margin-top	上の余白
margin-bottom	下の余白
margin-right	右側の余白
margin-left	左側の余白

CSSでは、１つの余白だけピンポイントで変えたい場合がたくさんあるので、上記のプロパティは暗記しておくと便利です。（意識しなくても、自然と暗記していけるかと思います。）

HTML/CSSを体系的に学びたい方は

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。