パディング

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 34/76。

CSSにおいて、パディング（padding）は、要素のコンテンツとその境界線（border）の間のスペースです。パディングは、コンテンツの周囲に視覚的な余白を作り、読みやすく、見た目を良くするために使用されます。要素の4つの側面（上、右、下、左）のパディングを、個別に、またはショートハンド記法を使用して制御できます。

paddingプロパティを使用するための基本的な構文は次のとおりです。

selector {
    padding-top: value;
    padding-right: value;
    padding-bottom: value;
    padding-left: value;
}

padding-top: 要素の上側のパディング。
padding-right: 要素の右側のパディング。
padding-bottom: 要素の下側のパディング。

padding-left: 要素の左側のパディング。
value: 希望するパディング値。ピクセル（px）、em（em）、パーセンテージ（%）、またはその他の有効なCSS単位で指定できます。

また、ショートハンド（略記法）を使用して、4辺すべてのパディングを一度に設定することもできます。例えば：

p {
    padding: 20px; /* 4辺すべてに同じパディングを適用します */
}

div {
    padding: 10px 25px; /* 上下のパディングを10pxに、左右のパディングを25pxに設定します */
}

.button {
    padding: 15px 30px 10px 5px; /* 各辺のパディングを個別に設定します */
}

この例では、すべての <p> (段落) 要素はすべての辺に 20px のパディングを持ち、すべての <div> 要素は上下に 10px、左右に 25px のパディングを持ち、button クラスを持つすべての要素は上に 15px、右に 30px、下に 10px、左に 5px のパディングを持ちます。

チャレンジ

簡単

2つの見出しを持つHTMLドキュメントが与えられています。あなたのタスクは、paddingプロパティを使用して、これらの要素のコンテンツの周囲に余白を追加することです。以下の手順に従ってください：

<h1>要素をターゲットにするCSSルールを記述します。すべての側のpaddingを20pxに設定します。
<h2>要素をターゲットにするCSSルールを記述します。上下のpaddingを10pxに、左右のpaddingを30pxに設定します。

チートシート

CSSのpaddingは、要素のコンテンツとその境界線（ボーダー）の間にスペースを作成します。

個別のパディングプロパティ:

selector {
    padding-top: value;
    padding-right: value;
    padding-bottom: value;
    padding-left: value;
}

ショートハンド（一括指定）表記:

/* すべての辺に同じパディング */
padding: 20px;

/* 上下: 10px, 左右: 25px */
padding: 10px 25px;

/* 上、右、下、左を個別に指定 */
padding: 15px 30px 10px 5px;

値はピクセル（px）、em（em）、パーセンテージ（%）、またはその他の有効なCSS単位で指定できます。

自分で試してみよう

<html>
<head>
    <title>Padding</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">The Box Model</h1>
    <h2 style="border:2px solid black;">It helps in controlling spacing and layout in web design! </h2>
</body>
</html>