CSSのpaddingプロパティ完全ガイド｜ショートハンドの使い方から単位の選び方まで

この記事では、CSSのpaddingプロパティの使い方を基礎からわかりやすく解説します。

CSSのpaddingプロパティは、HTML要素の内側にある「コンテンツ」と「ボーダー」の間の余白（スペース）をコントロールするために使います。

paddingは、CSSのmarginプロパティと混同されがちです。marginは要素のボーダーの外側にスペースを追加するもので、まさにpaddingとは正反対の役割を持っています。

CSSパディングの基本

まず、テキストラベル（コンテンツ）を持つシンプルなbutton要素を見てみましょう。

<button>Button</button>

このボタンに24pxのパディングを設定してみます。

button {
    padding: 24px;
}

これでボタンのテキストの周りに24pxの余白ができました。逆に、パディングの値を0に変更すると、テキストがボーダーにぴったりくっついた状態になります。

CSSには、パディングに関連するプロパティが全部で5種類あります。

• padding-top（上）
• padding-right（右）
• padding-bottom（下）
• padding-left（左）
• padding（先ほど使ったショートハンド）

最初の4つ（-top、-right、-bottom、-left）は個別方向のプロパティで、それぞれ1つの辺にしかパディングを指定できません。

最後のpaddingはいわゆるショートハンド（省略記法）プロパティで、5つの中で最も柔軟性が高く、実際に最もよく使われるプロパティです。

それでは、paddingショートハンドについてもう少し詳しく見ていきましょう。

paddingショートハンドの使い方

ショートハンドのpaddingプロパティは、複数のパディング値を一度に指定できます（1つ、2つ、3つ、または4つの値）。それぞれのパターンを例とともに確認していきます。

値が1つの場合

先ほどの24pxのボタンの例は、実は次のように書くこともできます。

button {
    padding-top: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
    padding-left: 24px;
}

しかし、4辺すべてに同じ値を設定したいなら、値を1つだけ指定するショートハンドを使えば一行で済みます。

button { 
    padding: 24px;
}

値が2つの場合

たとえば「上下は16px、左右は24px」にしたい場合はどうすればよいでしょうか？

時間のかかる書き方だと、こうなります。

button {
    padding-top: 16px; 
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 24px; 
}

あるいは、頼れる相棒である「値が2つ」のpaddingショートハンドを使えば、こう書けます。

button {
    padding: 16px 24px;
}

paddingプロパティに2つの値を指定した場合のルールは以下の通りです。

• 1つ目の値：上下両方のパディングに適用される
• 2つ目の値：左右両方のパディングに適用される

値が3つの場合

paddingプロパティに3つの値を指定した場合は、次のような意味になります。

button {
    padding: 12px 24px 8px;
}

• 1つ目の値：上のパディング
• 2つ目の値：左右両方のパディング
• 3つ目の値：下のパディング

値が4つの場合

paddingプロパティに4つの値を指定した場合は、時計回りに適用されます。

button {
    padding: 12px 16px 12px 16px;
}

• 1つ目の値：上のパディング
• 2つ目の値：右のパディング
• 3つ目の値：下のパディング
• 4つ目の値：左のパディング

単一方向のパディングプロパティはいつ使う？

柔軟性と効率の面では、ショートハンドのpaddingプロパティが単一方向のプロパティを圧倒します。

それでも、あえて次のように書く理由はどこにあるのでしょうか？

padding-left: 24px;

同じ結果は、以下のショートハンドでも得られるのに、です。

padding: 0 0 0 24px; /* 上: 0、右: 0、下: 0、左: 24px */

単一方向のパディングプロパティを使う主な理由は、「何らかの理由で特定の1辺だけにパディングを追加したい」場合です。その際、残り3辺のパディング値はデフォルト値や現在の値（環境によって異なります）に任せることができます。

ただし注意が必要です。たとえば「左側だけにパディングを付け、上下右はゼロにしたい」というケースを考えてみましょう。単一方向のプロパティでこれを実現するには、既存のパディング値を上書きできるよう、次のようにすべての辺を明示的に書く必要があります。

padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 24px;

一方、ショートハンドを使えば、同じことを一行で書けます。

padding: 0 0 0 24px; /* 上、右、下、左 */

ここで言う「デフォルト値・現在の値」とは、具体的には次のような来源から継承されたスタイルのことです。

• ユーザーエージェントスタイルシート（ブラウザのデフォルトCSS）
• CSSライブラリやフレームワーク
• 自分がスタイルシートの上部などで定義した他のスタイル宣言（CSSはカスケードすることを忘れずに）

ユーザーエージェントスタイルシート（UAS）とは、すべてのブラウザに組み込まれている最小限のCSSスタイルシートのことです。自分でCSSを一切書かなくても、コンテンツがある程度整形されてエンドユーザーが読める状態になるように設計されています。

たとえば、現在のbutton要素のパディングが次のようになっているとしましょう（どの来源から来たものかは問いません）。

button {
    padding-top: 16px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 16px
}

ここで、上のパディングだけを指定するクラスを作成します。

.button-login {
    padding-top: 40px;
}

そして、このクラスをbutton要素に適用します。

<button class="button-login">Login</button>

すると、ログインボタンは上のパディングだけ40pxになり、右・下・左のパディングは元の値がそのまま引き継がれます。

お察しの通り、単一方向のパディングプロパティの使い方によっては、CSSコードベースの整理状況次第で混乱や予測不能な結果を招きかねません。

筆者自身は、単一方向のパディングプロパティをほとんど使いません。新しいプロジェクトを始めるたびに、まずパディング値をすべてゼロにリセットし、その上でUIコンポーネント（HTML要素）に、プロジェクト独自のスペーシングスケールに基づいたパディングを追加していくからです。

こうすることで、各ブラウザのユーザーエージェントスタイルシートが引き継ぐさまざまなスタイルを気にする必要がなくなり、ワークフローが格段に予測しやすくなります。

以上の理由から、パディング値の定義には基本的にショートハンドのpaddingを使うのが実用的です。迷ったら、ショートハンドを選びましょう。

paddingショートハンドの覚え方

値が4つのショートハンドは最も覚えやすいでしょう。値が時計回りに「上、右、下、左」の順で適用されるからです。

一方、2つと3つの値のショートハンドは少し直感的ではありません。

• 値が2つの場合：16px 8px（上下、左右）
• 値が3つの場合：8px 16px 4px（上、左右、下）

補足：実務では、値が3つのショートハンドを使う機会はほとんどありません。筆者としては、無理に暗記する価値はないと思います（脳の容量は別のことに使いましょう）。必要になったらその都度調べれば十分です。

paddingに使える長さの単位

padding系プロパティには、あらゆる種類の長さの単位を指定できます。代表的な単位は、px、rem、em、%、vw、vh、inheritなどです。

補足：このチュートリアルではピクセル単位（px）を使用しました。これは、読者の多くが初心者であると想定し、感覚的に理解しやすい単位だからです。特にIllustrator、Sketch、Figmaなどのデザインツール出身の方には馴染み深いはずです。

ただし、ピクセルは固定長の絶対単位であるため、スケーリングには向いていません。

一方、前述のrem、em、%、vw、vhといった相対単位はスケーリングに優れていますが、それぞれ仕組みが異なります。

筆者はパディングの値には主にremを使っていますが、現代ではすべてのモダンブラウザがあらゆる単位タイプを処理できるため、これはほぼ好みの問題と言えます。

パフォーマンス最適化（読み飛ばし可）

パフォーマンス最適化のバックグラウンドをお持ちの方なら、こう考えているかもしれませんね。

「ショートハンドを使うのと、単一方向の値を使うのとで、パフォーマンスに違い（コスト）はあるのか？」

答えはイエスです。ただし、次の2つの例のどちらが総合的に高性能かを予測するのは、ほぼ不可能です。

padding: 8px 12px 16px 20px;

padding-top: 8px;
padding-right: 12px;
padding-bottom: 16px;
padding-left: 20px;

処理するデータ量（バイト数）が少ない分、ショートハンドの方が明らかに高速だと思うかもしれません。

しかし、実際のパフォーマンスは、開発環境から本番環境までの間に行われるコード処理（パース、ミニファイ、コンパイル）の内容や、プロジェクトの構成・設定方法に依存します。

そもそも、生じ得る差はごくわずかなので、心配する価値はありません。パフォーマンス改善においては、戦う場所を賢く選ぶことが大切です。パディングプロパティよりも、取り組むべき大きな課題が必ずあるはずです。