スタイルシートのpaddingは内側の余白の幅を指定する属性ですが、paddingやmarginなど上下左右の幅を指定できる属性は大抵の場合書き方が４通り有ります。忘れがちなのでメモしておきます。

以下の様に書くことができます。

• padding:5px;
• padding:5px 10px;
• padding:5px 10px 15px;
• padding:5px 10px 15px 20px;

書き方によって設定される位置は以下のとおりです。

• [全部]
• [上下] [左右]
• [上] [左右] [下]
• [上] [右] [下] [左]

まとめるとこうです。

• padding:5px;(上右下左全て同じ値(5px)を設定)
• padding:5px 10px;（[上下]に5px。[左右]に10px設定。）
• padding:5px 10px 15px;（[上]に5px。[左右]に10px設定。[下]に15pxを設定。）
• padding:5px 10px 15px 20px;（[上]に5px。[右]に10px。[下]に15px。[左]に20px。）

基本的には全てバラバラに個別指定する方法を覚えておけば自分で作る分にはなんとかなります。（上右下左）と覚えておけばいいわけです。

しかし、仕事などの場合、人のスタイルシートを読む必要もしばしばあるわけです。趣味でも人のスタイルシートを参考にすることもあるかと思います。そういうわけでその他の指定方法もちゃんと覚えていたほうが便利です。

実際指定したときどのようになるかの実例です。赤枠(DIV)にpadding属性で内側の余白を指定しています。

・左右下左全ての幅を5pxに設定。

・[左右]に5pxの余白。[上下]に10pxの余白。

・[上]に5pxの余白。[左右]に10pxの余白。[下]に15pxの余白。

・[上]5px。[右]10px。[下]15px。[左]20px。

タグ : スタイルシート