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

CSS

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

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

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

このページで学べる内容
  1. 【おさらい】CSSとHTMLの基本文法/意味と使い方・書き方
  2. padding(パディング)プロパティとmargin(マージン)プロパティとは何か?
  3. paddingとmarginの違いは何?
  4. 実際に、paddingとmarginを使ってみる!

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

スポンサーリンク

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

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

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

HTMLの基本―タグと要素

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

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

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

CSSの基本

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

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

blank

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

paddingとmaginとは?

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

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

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

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

この余白の部分を表しているのがpaddingとmarginプロパティです。なぜ、1つのブロックに余白が2つも存在するか?これは、実際に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>

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

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

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

その結果がこちら。

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

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

marginの使い方

marginの動きがよくわかるように、段落を1つ増やします。また、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では、1つの余白だけピンポイントで変えたい場合がたくさんあるので、上記のプロパティは暗記しておくと便利です。(意識しなくても、自然と暗記していけるかと思います。)

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

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

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

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

このWebサイトは現役のエンジニアが以下3点を目的として運営しています。

  1. 勉強:一度理解した内容を忘れないように。
    アウトプットは「最強のインプット」である!
  2. 備忘:忘れたとしても後から見返せるように。
    未来の自分への「お手紙」を書いています。
  3. 共有:〇〇ってこうだったんだ!の感動をシェアできるように。
    あなたの知識は誰かにとっての「価値ある情報」です。

副業ブログの始め方はこちらから

スポンサーリンク
CSSHTMLWEBデザイン
ビズドットオンラインをフォローする
blank
ビズドットオンライン
タイトルとURLをコピーしました