NO.64 パディング

パディングでは、マージンとは違って内部の余白を指定します。
テーブルでいうとcellpaddingに当たります。
ページ下部の応用を前回(マージン)と見比べてみると違いがよく分かると思います。

padding-top,padding-right,padding-bottom,padding-left
上下左右のパディングを個別に指定できます。
Value: <length> | <percentage> | auto

<div style="padding-top:2px;padding-right:4px;padding-bottom:3px;padding-left:4px;">This source is test.</div>

padding
上下左右のパディングを一括指定できます。
Value: [ <length> | <percentage> | auto ]{1,4}

<style type="text/css">
<!--
.t1{padding:3px;}     /*上下左右に3pxの余白*/
.t2{padding:4px 5px;}     /*上下4px,左右5pxの余白*/
.t3{padding:6px 7px 8px;}     /*上6px,左右7px,下8pxの余白*/
-->
</style>
<div class=t1>This source is test.</div>
<div class=t2>This source is test.</div>
<div class=t3>This source is test.</div>

上記の内容を応用
◆HEAD内の記述 <style type="text/css">  </style>
◆BODY内の記述 test:<br> <div class=zzA>padding-top:15px;padding-bottom:16px;padding-right:17px;padding-left:18px;</div><br> test:<br> <div class=zzB>padding:20px 30px;</div><br>
◆実行例

test:

padding-top:15px;padding-bottom:16px;padding-right:17px;padding-left:18px;

test:

padding:20px 30px;

前に戻る　次に進む

SEO		[PR] 爆速!無料ブログ無料ホームページ開設無料ライブ放送