CSSチュートリアル

CSSホーム CSSの紹介 CSS構文 CSSセレクター CSSハウツー CSSコメント CSSの色 CSSの背景 CSSボーダー CSSマージン CSSパディング CSSの高さ/幅 CSSボックスモデル CSSの概要 CSSテキスト CSSフォント CSSアイコン CSSリンク CSSリスト CSSテーブル CSSディスプレイ CSSの最大幅 CSSの位置 CSSZ-index CSSオーバーフロー CSSフロート CSSインラインブロック CSS整列 CSSコンビネータ CSS疑似クラス CSS疑似要素 CSSの不透明度 CSSナビゲーションバー CSSドロップダウン CSS画像ギャラリー CSS画像スプライト CSS AttrSelectors CSSフォーム CSSカウンター CSSWebサイトのレイアウト CSSユニット CSSの特異性 CSS!重要 CSS数学関数

CSS Advanced

CSSの丸みを帯びたコーナー CSSボーダー画像 CSSの背景 CSSの色 CSSカラーキーワード CSSグラデーション CSSシャドウ CSSテキスト効果 CSSWebフォント CSS2D変換 CSS3D変換 CSSトランジション CSSアニメーション CSSツールチップ CSSスタイルの画像 CSS画像反射 CSSオブジェクト適合 CSSオブジェクトの位置 CSSマスキング CSSボタン CSSページ付け CSSの複数の列 CSSユーザーインターフェイス CSS変数 CSSボックスのサイズ設定 CSSメディアクエリ CSSMQの例 CSSFlexbox

CSSレスポンシブ

RWDイントロ RWDビューポート RWDグリッドビュー RWDメディアクエリ RWD画像 RWDビデオ RWDフレームワーク RWDテンプレート

CSSグリッド

グリッドイントロ グリッドコンテナ グリッドアイテム

CSS SASS

SASSチュートリアル

CSSの

CSSテンプレート CSSの例 cssクイズ CSS演習 CSS証明書

CSSリファレンス

CSSリファレンス CSSセレクター CSS関数 CSSリファレンスオーラル CSSWebセーフフォント CSSアニメーション可能 CSSユニット CSSPX-EMコンバーター CSSの色 CSSの色の値 CSSのデフォルト値 CSSブラウザのサポート

CSSパディング


パディングは、定義された境界線の内側で、要素のコンテンツの周囲にスペースを作成するために使用されます。


この要素には70pxのパディングがあります。


CSSパディング

CSSpaddingプロパティは、定義された境界線の内側で、要素のコンテンツの周囲にスペースを生成するために使用されます。

CSSを使用すると、パディングを完全に制御できます。要素の両側(上、右、下、左)のパディングを設定するためのプロパティがあります。


パディング-個々の側面

CSSには、要素の両側のパディングを指定するためのプロパティがあります。

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

すべてのパディングプロパティには、次の値を指定できます。

  • 長さ-px、pt、cmなどでパディングを指定します。
  • -含まれている要素の幅の%でパディングを指定します
  • 継承-パディングを親要素から継承する必要があることを指定します

注:負の値は許可されていません。

<div>要素の4辺すべてに異なるパディングを設定します。  

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}


パディング-速記プロパティ

コードを短くするために、1つのプロパティですべてのパディングプロパティを指定することができます。

このpaddingプロパティは、次の個々のパディングプロパティの省略形のプロパティです。

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

だから、これがどのように機能するかです:

paddingプロパティに4つの値がある場合:

  • パディング:25px 50px 75px 100px;
    • トップパディングは25pxです
    • 右のパディングは50pxです
    • 下部のパディングは75pxです
    • 左のパディングは100pxです

次の4つの値でpaddingshorthandプロパティを使用します。

div {
  padding: 25px 50px 75px 100px;
}

paddingプロパティに3つの値がある場合:

  • パディング:25px 50px 75px;
    • トップパディングは25pxです
    • 左右のパディングは50pxです
    • 下部のパディングは75pxです

次の3つの値でpaddingshorthandプロパティを使用します。 

div {
  padding: 25px 50px 75px;
}

paddingプロパティに2つの値がある場合:

  • パディング:25px 50px;
    • 上下のパディングは25pxです
    • 左右のパディングは50pxです

次の2つの値でpaddingshorthandプロパティを使用します。 

div {
  padding: 25px 50px;
}

paddingプロパティに1つの値がある場合

  • パディング:25px;
    • 4つのパディングはすべて25pxです

次の1つの値でpaddingshorthandプロパティを使用します。 

div {
  padding: 25px;
}

パディングと要素の幅

CSSwidthプロパティは、要素のコンテンツ領域の幅を指定します。コンテンツ領域は、要素(ボックスモデル)のパディング、境界線、およびマージンの内側の部分です。

したがって、要素に指定された幅がある場合、その要素に追加されたパディングは、要素の合計幅に追加されます。これは多くの場合、望ましくない結果です。

ここで、<div>要素の幅は300pxです。ただし、<div>要素の実際の幅は350px(300px +左のパディングの25px +右のパディングの25px)になります。

div {
  width: 300px;
  padding: 25px;
}

パディングの量に関係なく、幅を300pxに保つために、 box-sizingプロパティを使用できます。これにより、要素は実際の幅を維持します。パディングを増やすと、使用可能なコンテンツスペースが減少します。

ボックスサイズ設定プロパティを使用して、パディングの量に関係なく、幅を300pxに維持します。

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

その他の例


この例は、<p>要素の左パディングを設定する方法を示しています。


この例は、<p>要素の右パディングを設定する方法を示しています。


この例は、<p>要素の上部のパディングを設定する方法を示しています。


この例は、<p>要素の下部のパディングを設定する方法を示しています。


エクササイズで自分をテストする

エクササイズ:

<h1>要素の上部のパディングを30ピクセルに設定します。

<style>
h1 {
  : 30px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>


すべてのCSSパディングプロパティ

Property Description
padding A shorthand property for setting all the padding properties in one declaration
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element