CSSパディングプロパティの使用方法

CSSのパディングの使用方法を学ぶ プロパティ。

CSSのpadding プロパティは、内部のスペースの量を制御するために使用されます コンテンツと境界線の間のHTML要素。

padding CSSのmarginと混同されることがよくあります プロパティ。外部にスペースを追加します。 要素の境界線（paddingの反対）

CSSパディングの基本

テキストラベル（そのコンテンツ）が付いたボタン要素は次のとおりです。

<button>Button</button>

ボタンに24pxのパディング値を与えましょう：

button { 
    padding: 24px;
}

結果：

パディング値を0に変更した場合 あなたはこれを手に入れます：

CSSには5つの異なるパディングプロパティがあります：

• padding-top
• padding-right
• padding-bottom
• padding-left
• padding （先ほど使用したもの）

最初の4つのパディングプロパティ（-top、-right、-bottom、-left）は、片側にのみパディングを追加できる個別の単一方向プロパティです。

最後のpadding 、いわゆる省略形のプロパティ 5つのパディングプロパティの中で最も柔軟性があり、最もよく使用されています。

paddingを見てみましょう もう少しプロパティ。

パディングの速記の使用方法

省略形のpadding プロパティ（これまでに使用した唯一のプロパティ）は、同時に複数のパディング値（1、2、3、または4つの値）を追加できます。

いくつかの例を見てみましょう。

1つの値のパディングの省略形

前の24pxのパディングボタンの例では、CSSでこれを行うことができました：

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

ただし、1つの値を使用して4つの側面すべてを一度にターゲットにできる場合は、時間の無駄です。 速記のパディング：

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を使用する場合 twoのプロパティ 上記のような値：

• 最初の値は、上部と下部の両方のパディングを対象としています
• 2番目の値は、左右両方のパディングを対象としています

結果：

3つの値のパディングの省略形

paddingを使用する場合 3のプロパティ 次のような値：

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

• 最初の値はトップパディングです
• 2番目の値は両方です 左右のパディング
• 3番目の値は下部のパディングです

結果：

4つの値のパディングの省略形

paddingを使用する場合 4のプロパティ 次のような値：

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

• 最初の値はトップパディングです
• 2番目の値は右パディングです
• 3番目の値は下部のパディングです
• 4番目の値は左パディングです

いつ一方向のパディングプロパティを使用しますか？

省略形のpadding プロパティは、柔軟性と効率の観点から、一方向のパディングプロパティの評価を開始します。

では、なぜたとえば次を使用するのでしょうか：

padding-left: 24px;

以下の省略形を使用して同じ結果を得ることができる場合は？

padding: 0 0 0 24px; /* top: 0, right: 0, bottom: 0, left: 24px */

何らかの理由で要素の片側にのみ特定のパディングを追加し、他の3つの側のパディング値をデフォルト/現在のパディング値（セットアップで）。

ただし、要素の左側にのみパディングが必要で、上部、右側、下部にゼロのパディングが必要であるとします。単一方向のパディングプロパティを使用してこれを行うには、コードを次のように記述して、上、右、下の既存のパディング値が上書きされるようにする必要があります。

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

さて、上記は、省略形のパディングプロパティを使用して1行に記述できるものの膨大な量のコードです：

padding: 0 0 0 24px; /* top, right, bottom, left */

私が話しているこれらのデフォルト/現在のパディング値は何ですか？

次のいずれかから継承されたスタイルを指します：

• ユーザーエージェントスタイルシート
• CSSライブラリまたはフレームワーク
• またはCSSスタイルシートの上部に自分で追加したその他のスタイル宣言（CSSカスケードを思い出してください）。

ユーザーエージェントスタイルシート（UAS） は、すべてのブラウザに組み込まれている最小限のCSSスタイルシートです。自分でCSSをWebサイトに追加しなくても、エンドユーザーがコンテンツを読みやすくするのに十分なスタイル/フォーマットがあることを確認するためにあります。

たとえば、ボタン要素の現在のパディングが次のようになっている場合（どこから来たかに関係なく）：

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

そして、パディングの最上位値のみに対応するボタンクラスを作成します。

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

そしてそれをボタン要素に追加します：

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

次に、ログインボタンは次のようになります。

繰り返しになりますが、右、下、および左のパディング値は別の場所から継承されます。

ご想像のとおり、単一方向のパディングプロパティを使用すると、特定のCSSコードベースがどのように編成されているかによって、混乱や予測できない結果が生じる可能性があります。

私 すべての新しいプロジェクトの開始時にパディング値をゼロにリセットしてから、プロジェクトの間隔スケールに基づいてUIコンポーネント（HTML要素）にパディング値を追加するため、一方向のパディングプロパティを使用することはめったにありません。

これにより、Xブラウザのユーザーエージェントスタイルシートから受け継がれるさまざまなスタイルについて心配する必要がなくなるため、ワークフローがより予測可能になります。

上記のすべての理由から、短縮形のpaddingを使用する方が全体的に実用的です。 パディング値を定義する方法—ほとんどの場合。

疑わしい場合は、パディングの省略形を使用してください。

パディングの速記を覚える方法

値は時計回りに追加されるため、4つの値の省略形が最も覚えやすいです。 上、右、下、左。

2つおよび3つの値の省略形はあまり明白ではありません：

• 2つの値の省略形：16px 8px （上下、左右）
• 3つの値の省略形：8px 16px 4px （上、左右、下）

注： 実際には、3つの値の速記を使用する必要はめったにありません。これは、私にとっては覚える価値がないためです（脳の能力を他のことに使用してください）。使用する必要がある場合は調べてください。

許容可能なパディングの長さの単位

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;

処理するバイト（データ）が少ないため、省略形が最もパフォーマンスの高いオプションであると思われるかもしれません。

ただし、それはすべて、コード処理（解析、縮小、コンパイル）の観点から開発と本番の間で何が行われるか、およびプロジェクトがどのように構成および編成されるかに依存します。

潜在的な違いはごくわずかなので、心配する価値はありません。あなたは賢く戦いを選ぶ必要があります、そしてそれがパフォーマンスになると、あなたはパディングプロパティよりもはるかに大きな魚を揚げることができます。