内側にある余白領域の幅を表すpaddingプロパティ
padding

 padding(パディング)はボックス内側(borderプロパティより内側)の余白を表すプロパティです。コンテンツエリアを示す部分がwidthで、それらに囲われる余白の幅をpaddingプロパティで指定します。

 このプロパティに設定できる値の単位には、固定幅の「px」「pt」「em」と、パーセンテージで相対的に変わる「%」と、状況に応じて値が自動的に計算される「auto」があります。

 padding-toppadding-bottompadding-leftpadding-rightといった上下左右パディングを設定するそれぞれのプロパティのショートハンドプロパティとして使われます。

基本データ

構文 セレクタ{padding:値;}
継承 ×
絶対的なサイズをpx(ピクセル)を使って指定する場合
○○px
相対的なサイズを%(パーセント)、em(イーエム)を使って指定する場合
○○%、○○em
親から継承させる場合
inherit
状況に応じて値を自動的に計算させる場合
auto
効果 上右下左の順でマージンの値を設定できる
初期値 0
適用個所 すべての要素

分かりやすいようにborderプロパティで黒い枠を作っています。

p {padding: 5px 100px 20px 40px;}

動作Webブラウザ

Internet Explorer 全バージョン
Firefox 全バージョン
Safari全バージョン
Opera全バージョン
Chrome全バージョン
iPhone/iPad 全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("【ID属性値】").style.padding

jQueryを使った参照方法

$('【セレクタ】').css('padding','【値】');
$('【セレクタ】').css({'padding':'【値】'});

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

デザインハック 記事ランキング

本日 月間