WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「パディングの大きさ」

padding 「パディングの大きさ」

padding プロパティはパディング領域の４辺（上下左右）の設定をまとめて行うことができます。 パディング領域とは、要素の内側の内容までの余白です。

boxsizing

CSS Ver.適用要素継承
2.1全てしない
広告

padding の指定方法

構文

padding : length　;

 １個～４個までスペースで区切って指定可能。負の値は指定不可。
１個指定は、４辺（上下左右）全てに同じ値になります。
２個指定は、１個目が上下、２個目が左右の値になります。
３個指定は、１個目が上、２個目が左右、３個目が下の値になります。
４個指定は、１個目が上、２個目が右、３個目が下、４個目が左の値になります。
プロパティ/設定値意味
padding: 100px;
padding: 80%;
padding: 20em; 		パディングを値で指定
「長さ・大きさの単位」参照
デフォルト：「タグ毎のスタイル初期値」を参照
ページTOP

padding のサンプル


<style type="text/css">
/* ----- サンプル1 --------------- */
.padding1{
  padding    : 20px;
  border     : 1px solid royalblue;
}
/* ----- サンプル2 --------------- */
.padding2{
  padding-top    : 20px;
  padding-right  : 20px;
  padding-bottom : 20px;
  padding-left   : 20px;
  border          : 1px solid royalblue;
}
/* ----- サンプル3 --------------- */
.padding3{
  padding    : 10px 20px 30px 40px;
  border     : 1px solid royalblue;
}
/* ----- サンプル4 --------------- */
.padding4{
  padding-top    : 10px;
  padding-right  : 20px;
  padding-bottom : 30px;
  padding-left   : 40px;
  border          : 1px solid royalblue;
}
<!-- html -->
<div class="padding1">
■paddingサンプル１■<br>padding:20px;<br>paddingpadding...paddingpadding
</div>

<div class="padding2">
■padding-xxxサンプル２■<br>
padding-top:20px;<br>padding-right:20px;<br>
padding-bottom:20px;<br>padding-left:20px;<br>
padding-top;padding-right;padding-bottom;padding-left; ... 
padding-top;padding-right;padding-bottom;padding-left;
</div>

<div class="padding3">
■paddingサンプル３■<br>padding:10px; 20px; 30px; 40px;<br>paddingpadding...paddingpadding
</div>

<div class="padding4">
■padding-xxxサンプル４■<br>
padding-top:10px;<br>padding-right:20px;<br>
padding-bottom:30px;<br>padding-left:40px;<br>
padding-top;padding-right;padding-bottom;padding-left; ... 
padding-top;padding-right;padding-bottom;padding-left;
</div>
■paddingサンプル１■
padding:20px;

paddingpaddingpaddingpaddingpaddingpaddingppaddingpaddingpaddingpaddingpaddingpaddingppaddingpaddingpaddingpaddingpaddingpaddingppaddingpaddingpaddingpaddingpaddingpaddingppaddingpaddingpaddingpaddingpaddingpaddingppaddingpaddingpaddingpaddingpaddingpaddingppaddingpaddingpaddingpaddingpaddingpaddingppaddingpaddingpaddingpaddingpaddingpadding
パディングをまとめて１個指定の場合

４辺（上下左右）のパディングが、全て20pxとなる

■padding-xxxサンプル２■
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;

padding-top;padding-right;padding-bottom;padding-left;padding-top;padding-right;padding-bottom;padding-left;padding-top;padding-right;padding-bottom;padding-left;padding-top;padding-right;padding-bottom;padding-left;
パディングを個別に指定の場合

４辺（上下左右）のパディングが、全て20pxとなる

■paddingサンプル３■
padding:10px 20px 30px 40px;

paddingpaddingpaddingpaddingpaddingpaddingppaddingpaddingpaddingpaddingpaddingpaddingppaddingpaddingpaddingpaddingpaddingpaddingppaddingpaddingpaddingpaddingpaddingpaddingppaddingpaddingpaddingpaddingpaddingpaddingppaddingpaddingpaddingpaddingpaddingpaddingppaddingpaddingpaddingpaddingpaddingpaddingppaddingpaddingpadding
パディングをまとめて４個指定の場合

上のパディングが、10px
右のパディングが、20px
下のパディングが、30px
左のパディングが、40px
となる

■padding-xxxサンプル４■
padding-top:10px;
padding-right:20px;
padding-bottom:30px;
padding-left:40px;

padding-top;padding-right;padding-bottom;padding-left;padding-top;padding-right;padding-bottom;padding-left;padding-top;padding-right;padding-bottom;padding-left;padding-top;padding-right;padding-bottom;padding-left;
パディングを個別に指定の場合

上のパディングが、10px
右のパディングが、20px
下のパディングが、30px
左のパディングが、40px
となる

関連するCSS(STYLE)
marginマージンの大きさ
margin-bottom下マージン
margin-left左マージン
margin-right右マージン
margin-top上マージン
padding-bottom下パディング
padding-left左パディング
padding-right右パディング
padding-top上パディング
関連するHTMLタグ
framesetフレームのウィンドウ分割
spacerスペース挿入
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン