CSSのpaddingで内側の余白を設定する方法をわかりやすく解説

paddingプロパティは、要素のコンテンツとそのボーダーとの間のスペースを指定します。これにより、要素内のコンテンツがボーダーに密着せず、余裕を持って表示されるようになります。

paddingプロパティの値とその効果の一覧

padding: 0; – コンテンツとボーダーの間にスペースを設けません。
padding: 10px; – 四辺すべてに10pxのスペースを設けます。
padding: 20px; – 四辺すべてに20pxのスペースを設けます。
padding: 10px 20px; – 上下に10px、左右に20pxのスペースを設けます。

注意点や関連情報

paddingはボックスモデルの一部であり、要素の内側のスペースを指定する際に重要なプロパティです。marginが外側のスペースを指定するのに対し、paddingは内側に適用されます。要素のサイズに影響を与えるため、コンテンツが溢れないように調整が必要です。

paddingが効かない時の原因と対策

要素がインライン要素になっている

インライン要素（<span>や<a>など）は、通常paddingの上下方向（padding-topやpadding-bottom）が効かないことがあります。インライン要素では、左右のpaddingのみが適用されることが多いです。

対策: インライン要素に対してpaddingを適用したい場合は、display: inline-blockやdisplay: blockに変更して、上下のpaddingを適用可能にします。

親要素のサイズ制限やoverflowプロパティが影響している

親要素にoverflow: hiddenやoverflow: autoが設定されている場合、子要素のpaddingが親要素のサイズ制約によって適切に表示されないことがあります。

対策: 親要素のoverflowやheight、widthの設定を確認し、必要に応じてサイズやoverflowプロパティを調整して、子要素のpaddingが期待通りに反映されるようにします。

共通するCSSコード

.css-sample-container {
      width: 300px;
      margin: 20px 0;
      padding: 10px;
      border: 2px solid #000;
      background-color: #f0f0f0;
    }

    .css-sample-box {
      background-color: #d3e0ea;
      text-align: center;
      font-size: 16px;
      color: #333;
      height: 100px;
      line-height: 100px;
    }

    .css-sample-padding-0 {
      padding: 0;
    }

    .css-sample-padding-10px {
      padding: 10px;
    }

    .css-sample-padding-20px {
      padding: 20px;
    }

    .css-sample-padding-10px-20px {
      padding: 10px 20px;
    }

padding: 0;

コンテンツとボーダーの間にスペースを設けません。

HTMLコード

<div class="css-sample-container css-sample-padding-0">
      <div class="css-sample-box">
        padding: 0
      </div>
    </div>

CSSコード

.css-sample-padding-0 {
      padding: 0;
    }

表示結果

padding: 0

padding: 10px;

四辺すべてに10pxのスペースを設けます。

HTMLコード

<div class="css-sample-container css-sample-padding-10px">
      <div class="css-sample-box">
        padding: 10px
      </div>
    </div>

CSSコード

.css-sample-padding-10px {
      padding: 10px;
    }

表示結果

padding: 10px

padding: 20px;

四辺すべてに20pxのスペースを設けます。

HTMLコード

<div class="css-sample-container css-sample-padding-20px">
      <div class="css-sample-box">
        padding: 20px
      </div>
    </div>

CSSコード

.css-sample-padding-20px {
      padding: 20px;
    }

表示結果

padding: 20px

padding: 10px 20px;

上下に10px、左右に20pxのスペースを設けます。

HTMLコード

<div class="css-sample-container css-sample-padding-10px-20px">
      <div class="css-sample-box">
        padding: 10px 20px
      </div>
    </div>

CSSコード

.css-sample-padding-10px-20px {
      padding: 10px 20px;
    }

表示結果

padding: 10px 20px

まとめ

padding: 0; – コンテンツとボーダーの間にスペースを設けません。
padding: 10px; – 四辺すべてに10pxのスペースを設けます。
padding: 20px; – 四辺すべてに20pxのスペースを設けます。
padding: 10px 20px; – 上下に10px、左右に20pxのスペースを設けます。