6日でできる 新HTML&CSS入門｜paddingとmarginの基本
余白を制すると、Webページはぐっと読みやすくなる。
paddingとmarginを使い分けて、整ったレイアウトを作ろう。
Webページを作るとき、文字や画像をただ並べるだけでは、見やすいデザインにはなりません。要素同士が近すぎると窮屈に感じますし、文字が枠線にくっついていると読みにくくなります。そこで大切になるのが、CSSで指定する余白です。
CSSの余白には、主にpaddingとmarginがあります。どちらも余白を作るためのプロパティですが、余白ができる場所が違います。paddingは要素の内側に作る余白で、内容と枠線の間を広げます。marginは要素の外側に作る余白で、隣り合う要素との距離を広げます。
たとえば、ボタンの文字と枠線の間を広げたい場合はpaddingを使います。一方で、ボタンと次の文章の間を広げたい場合はmarginを使います。この違いを理解すると、Webページの見た目をかなり調整しやすくなります。
この記事では、paddingの基本から、方向ごとの指定、marginとの違い、複数classを使った指定方法まで、サンプルコードを使いながら丁寧に解説していきます。
paddingは内側の余白を作るCSS
paddingは、要素の内容とborderの間に作る内側の余白です。内容とは、文字や画像など実際に表示される中身のことです。
たとえば、見出しにborderを付けたとき、paddingがないと文字が枠線の近くに表示されます。これでも表示はできますが、少し窮屈な印象になります。paddingを指定すると、文字と枠線の間に空間ができ、読みやすく落ち着いた見た目になります。
| 種類 | 余白ができる場所 | 主な役割 |
|---|---|---|
| padding | borderの内側 | 内容と枠線の間に余白を作る |
| margin | borderの外側 | 要素同士の間に余白を作る |
paddingは、ボタン、カード、見出し、テーブルのセル、入力フォームなど、さまざまな場面で使います。Webページの部品を読みやすく見せるための、とても基本的なCSSです。
図1：paddingは内容と枠線の間にできる内側余白
この図から分かること
paddingを設定すると、文字や画像などの内容とborderの間に余白ができます。枠線に文字が近すぎると窮屈に見えますが、paddingを入れることで、見出しやボックスが読みやすくなります。paddingは、要素の内側を整えるための大切なCSSです。
paddingの基本サンプル
まずは、paddingがある場合とない場合の違いを確認してみましょう。ここでは、同じh2にborderとbackground-colorを付け、片方だけにpaddingを指定します。
ファイル名： lesson30_1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>paddingの基本確認</title>
<style>
h2 {
border: 3px solid #3366cc;
background-color: #e8f0ff;
}
.space-inside {
padding: 16px;
}
</style>
</head>
<body>
<h1>paddingの見え方</h1>
<h2>paddingなしの見出し</h2>
<h2 class="space-inside">paddingありの見出し</h2>
</body>
</html>ブラウザの表示例
1つ目のh2は、文字がborderに近い位置に表示されます。背景色は付いていますが、文字まわりに余裕が少ないため、少し詰まった印象になります。
2つ目のh2には、class="space-inside"が付いています。このclassにpadding: 16px;を指定しているため、文字とborderの間に16pxの内側余白ができます。これにより、見出し全体にゆとりが出て、読みやすい印象になります。
サンプルで使っているタグとCSS
| タグ・CSS・属性 | 役割 |
|---|---|
| h1 | ページの大きな見出しを表す |
| h2 | セクション見出しを表す |
| style | HTML内にCSSを書く |
| border | 要素に枠線を付ける |
| background-color | 要素の背景色を指定する |
| padding | 内容と枠線の間に内側余白を作る |
| class | 要素に名前を付け、CSSを分けて適用する |
このサンプルでは、paddingの有無だけで見た目が変わることを確認できます。文字サイズや色を変えなくても、余白を少し入れるだけで、見た目の印象はかなり変わります。
paddingは上下左右をまとめて指定できる
paddingは、上下左右すべてに同じ余白を入れる場合、1つの値で指定できます。
padding: 16px;この指定では、上、右、下、左のすべてに16pxの余白が入ります。もっとも基本的で分かりやすい書き方です。
ボタンや見出し、カードのように、全体に均等な余白を入れたいときによく使います。
paddingは方向ごとに個別指定できる
paddingは、上下左右を個別に指定することもできます。たとえば、左側だけに余白を入れたい場合はpadding-leftを使います。
| プロパティ | 意味 |
|---|---|
| padding-top | 上側の内側余白を指定する |
| padding-right | 右側の内側余白を指定する |
| padding-bottom | 下側の内側余白を指定する |
| padding-left | 左側の内側余白を指定する |
見出しの左側にだけ余白を入れたり、アイコンと文字の間を調整したりするときに、方向ごとの指定が役立ちます。
左側だけにpaddingを設定するサンプル
次の例では、divにborderを付け、左側だけにpaddingを設定します。文字が左の枠線から少し離れるため、読みやすくなります。
ファイル名： lesson30_2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>左側paddingの指定</title>
<style>
.notice-box {
border: 3px solid #2e8b57;
background-color: #f0fff4;
padding-left: 24px;
}
</style>
</head>
<body>
<h1>左側だけ余白を入れる</h1>
<div class="notice-box">
左側だけにpaddingを設定したお知らせボックスです。
</div>
</body>
</html>ブラウザの表示例
このサンプルでは、divの左側だけに24pxの内側余白が入ります。文字が左のborderから離れるため、読みやすくなります。
padding-leftを使うと、左側だけを調整できます。たとえば、見出しの左に太い線を付けたとき、文字が線に近すぎる場合にpadding-leftを指定すると、線と文字の間にきれいな余白を作れます。
paddingの省略記法
paddingは、1つずつ方向を指定するだけでなく、まとめて書くこともできます。このまとめて書く方法を覚えると、CSSを短く整理できます。
| 値の数 | 適用される方向 | 記述例 |
|---|---|---|
| 1つ | 上下左右すべて | padding: 8px; |
| 2つ | 上下、左右 | padding: 8px 20px; |
| 3つ | 上、左右、下 | padding: 8px 20px 12px; |
| 4つ | 上、右、下、左 | padding: 8px 20px 12px 4px; |
4つの値を指定する場合は、時計回りに上、右、下、左の順番です。
padding: 8px 20px 12px 4px;この指定は、上が8px、右が20px、下が12px、左が4pxという意味になります。
最初は少し覚えにくいかもしれませんが、上から時計回りと考えると分かりやすくなります。CSSではmarginでも同じ考え方を使います。
図2：paddingは方向ごとに指定できる
この図から分かること
paddingは、上下左右をまとめて指定することも、方向ごとに個別に指定することもできます。4つの値で指定する場合は、上、右、下、左の順番になります。見出しやボックスの余白を細かく調整したいときに便利です。
paddingとmarginの違い
paddingとmarginは、どちらも余白を作るCSSですが、場所が違います。ここはCSS初心者が特に迷いやすい部分です。
paddingはborderの内側にできる余白です。文字や画像などの内容とborderの間に空間を作ります。要素にbackground-colorを指定している場合、paddingの部分にも背景色が表示されます。
marginはborderの外側にできる余白です。要素と要素の距離を空けるために使います。marginの部分には、その要素の背景色は表示されません。
| 種類 | 余白の場所 | 背景色 | 使う場面 |
|---|---|---|---|
| padding | borderの内側 | 背景色が表示される | 文字と枠線の間を広げる |
| margin | borderの外側 | 背景色は表示されない | 要素同士の間隔を広げる |
たとえば、カードの中の文章をゆったり見せたい場合はpaddingを使います。カードと次のカードの間を広げたい場合はmarginを使います。
paddingとmarginを同時に使うサンプル
次のサンプルでは、1つのボックスにpaddingとmarginを同時に指定します。内側と外側の余白がどのように働くのかを確認しましょう。
ファイル名： lesson30_3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>paddingとmarginの違い</title>
<style>
.message-box {
border: 2px solid #f4a261;
padding: 14px;
margin: 24px;
background-color: #fff8e6;
}
</style>
</head>
<body>
<h1>paddingとmarginの確認</h1>
<div class="message-box">
paddingは内側の余白、marginは外側の余白を作ります。
</div>
<p>この文章は、上のボックスのmarginによって少し離れて表示されます。</p>
</body>
</html>ブラウザの表示例
message-boxには、border、padding、margin、background-colorが指定されています。
padding: 14px;によって、文字とborderの間に余白ができます。この余白はボックスの内側なので、背景色が表示されます。
margin: 24px;によって、ボックスの外側に余白ができます。これにより、周囲の要素との距離が広がります。次のpとの間にも余白ができるため、要素同士が詰まって見えにくくなります。
paddingとmarginの考え方
paddingとmarginを使い分けるときは、次のように考えると分かりやすいです。
| やりたいこと | 使うCSS |
|---|---|
| 文字と枠線の間を広げたい | padding |
| ボックス内の余裕を作りたい | padding |
| ボタンのクリックしやすさを高めたい | padding |
| 要素と要素の間隔を広げたい | margin |
| 見出しと本文の間を空けたい | margin |
| カード同士の距離を整えたい | margin |
内側を整えるならpadding、外側の距離を整えるならmarginです。この違いを押さえると、レイアウトの調整がかなり楽になります。
図3：paddingは内側、marginは外側
この図から分かること
paddingは、内容とborderの間にできる内側の余白です。marginは、borderの外側にできる余白で、要素同士の距離を作ります。どちらも余白を作るCSSですが、使う場所が違うため、目的に合わせて使い分けることが大切です。
複数classを使ってpaddingとmarginを組み合わせる
HTMLでは、class属性に複数のclass名を指定できます。複数のclass名を書くときは、半角スペースで区切ります。
たとえば、padding用のclassとmargin用のclassを分けて作っておき、1つの要素に両方を指定できます。
<p class="padding-small margin-medium">本文</p>このようにすると、padding用のスタイルとmargin用のスタイルを組み合わせて使えます。CSSを部品のように再利用できるので、同じ余白設定を何度も使いたいときに便利です。
複数classでpaddingとmarginを指定するサンプル
次の例では、paddingを指定するclassとmarginを指定するclassを分けて作り、1つのpに両方を指定しています。
ファイル名： lesson30_4.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>複数classで余白を指定</title>
<style>
.inner-space {
padding: 12px;
border: 2px solid #555;
background-color: #f7f7f7;
}
.outer-space {
margin: 18px;
}
</style>
</head>
<body>
<h1>複数classの使い方</h1>
<p class="inner-space outer-space">
この段落には、padding用のclassとmargin用のclassを同時に指定しています。
</p>
</body>
</html>ブラウザの表示例
pには、class="inner-space outer-space"が指定されています。これにより、inner-spaceのpadding、border、background-colorと、outer-spaceのmarginが同時に適用されます。
inner-spaceによって、段落の内側に余白と枠線、背景色が付きます。outer-spaceによって、段落の外側に余白ができます。
このように、複数classを使うと、CSSを分けて管理しながら、必要なスタイルを組み合わせることができます。
複数classを使うメリット
複数classを使うと、CSSの再利用がしやすくなります。
たとえば、いろいろな場所で同じpaddingを使いたい場合、毎回padding: 12px;を書くのではなく、共通classとして用意しておくことができます。さらに、marginだけ別のclassにしておけば、必要に応じて組み合わせを変えられます。
| classの分け方 | 役割 |
|---|---|
| inner-space | 内側余白や背景色を担当する |
| outer-space | 外側余白を担当する |
| alert-box | 注意表示の色や枠線を担当する |
| text-center | 文字の中央揃えを担当する |
ただし、classを細かく分けすぎると、HTML側のclass名が増えて分かりにくくなることもあります。学習段階では、padding用、margin用のように役割を分ける例として理解するとよいです。
よく使うタグとCSSの整理
paddingとmarginを学ぶときによく出てくるタグやCSSを整理しておきます。
| タグ・CSS・属性 | 説明 |
|---|---|
| div | 汎用的なブロック要素。レイアウトやボックス作成によく使う |
| p | 段落を表す |
| h1 | ページの大きな見出しを表す |
| h2 | セクション見出しを表す |
| border | 要素に枠線を付ける |
| padding | 内容とborderの間に内側余白を作る |
| margin | 要素の外側に余白を作る |
| background-color | 背景色を指定する |
| class | CSSを適用するための名前を要素に付ける |
paddingとmarginは、Webページの読みやすさを整えるうえでとてもよく使うCSSです。特に、borderやbackground-colorと一緒に使うと、余白の位置が分かりやすくなります。
paddingとmarginを使い分けるときのポイント
paddingとmarginを使い分けるときは、まずどこの余白を広げたいのかを考えます。枠の内側を広げたいのか、それとも要素同士の距離を広げたいのかで、使うCSSが変わります。
文字と枠線の間を広げたいならpaddingです。ボックスの中身をゆったり見せるために使います。ボタン、見出し、カード、表のセルなどでは、paddingを入れることで読みやすさが大きく変わります。
隣の要素との間隔を広げたいならmarginです。見出しと本文の間、カード同士の間、画像と説明文の間など、要素同士の距離を整えるときに使います。
CSSの余白調整で迷ったときは、要素を四角い箱として考えてみると分かりやすいです。箱の内側を広げるのがpadding、箱の外側を広げるのがmarginです。この考え方を身に付けると、Webページ全体のレイアウトを落ち着いて調整できるようになります。