padding-top（パディング）
padding-right
padding-bottom
padding-left

解説

上下左右のパディングを個別に指定する属性です（まとめて指定する属性は、paddingです。）。

padding-top：: 上パディングを指定する属性
padding-right：: 右パディングを指定する属性
padding-bottom：: 下パディングを指定する属性
padding-left：: 左パディングを指定する属性

値	<length> <percentage>
初期値	0
%値の基準	親エレメントの幅
適用	すべてのエレメント
継承	しない

対応状況（各属性共通）

全ての値

使用例

ソース

スタイル部に、

div{border:solid medium yellow;}
.left{padding-left:100pt;}
.right{padding-right:100pt;}
.top{padding-top:30pt;}
.bottom{padding-bottom:30pt;}
.topright{padding-top:100pt;padding-right:100pt;}

と記述し、

body部に、

<div>padding指定無し</div>
<div class="left">左パディング100ptです。</div>
<div class="right">右パディング100ptです。右パディング100ptです。右パディング100ptです。</div>
<div class="top">上パディング30ptです。</div>
<div class="bottom">下パディング30ptです。</div>
<div class="topright">上右パディング100ptです。上右パディング100ptです。</div>

と記述すると。

表示＆操作

padding指定無し

左パディング100ptです。

右パディング100ptです。右パディング100ptです。右パディング100ptです。

上パディング30ptです。

下パディング30ptです。

上右パディング100ptです。上右パディング100ptです。

　
と表示されます。

pokochan@mx1.tees.ne.jp

padding-top（パディング） padding-right padding-bottom padding-left

padding-top（パディング）
padding-right
padding-bottom
padding-left