【ボックス】padding [リファレンス]
説 明
テキストとそれを囲むボックスとの間隔(パディング)を設定します。
使い方
▼ 一括設定
padding: 上下左右;
padding: 上下 左右;
padding: 上 左右 下;
padding: 上 右 下 左;
▼ 個別指定
padding-top: 上;
padding-right: 右;
padding-bottom: 下;
padding-left: 左;
上、下、右、左:パディング(間隔)
解 説
上、下、右、左:数値+単位
数値+単位 で指定します。単位は主に「px」を用います。
「上下左右」は上、右、下、左側のパディング(間隔)を一括指定します。
「上下」は上、下を、「左右」は左、右のパディングを一括指定します。
「上」「右」「下」「左」は、個々にパディングを指定します。
次のキーワードが設定可能です。
初期値は「0」です。
0(初期値)、数値+単位
0・・・間隔はゼロです。
数値+単位・・・数値を設定します。単位は主に「px」を指定します。
尚、数値(サイズ)で指定する方法以外にパーセント(%)指定やauto(ブラウザ自動設定)指定がありますが、ここでは説明しません。
ソースコード:上下左右=10px
aaa1 {
padding:10px;
}
padding:10px;
}
表示例:上下左右=10px
テキスト |
ソースコード:上下=10px 左右=50px
aaa2 {
padding:10px 50px;
}
padding:10px 50px;
}
表示例:上下=10px 左右=50px
テキスト |
ソースコード:上=10px 右=30px 下=60px 左=100px
aaa3 {
padding:10px 30px 60px 100px;
}
padding:10px 30px 60px 100px;
}
ソースコード:上=10px 右=30px 下=60px 左=100px
aaa4 {
padding-top:10px;
padding-right:30px;
padding-bottom:60px;
padding-left:100px;
}
padding-top:10px;
padding-right:30px;
padding-bottom:60px;
padding-left:100px;
}
表示例:上=10px 右=30px 下=60px 左=100px
テキスト |
以上。
はじめまして。
こんにちは(´∇`)
CSSとか初心者中の初心者でしたが、
こちらのブログを拝見し、
とてもわかりやすかったです(´∇`)
お陰で自分のイメージに近いブログができました。
ありがとうございました。
by w.ring.link (2015-06-20 12:05)
* w.ring.linkさん *
はじめまして♪(^^)
少しでもお役に立てて光栄です!
「わかりやすかった」と言ってもらえるのが何よりも嬉しいかも〜♪
是非また遊びに来てくださいねっ。
by かほりん (2015-06-21 19:37)