aktombo PC Life_CSS の実例 
  /* 全体の設定*/

BODY{
font-style:normal;/*文字のスタイル*/
font-weight:normal;/*文字の太さ*/
font-size:14px;/*文字の大きさ*/
text-align:left;/*文字の寄せ方*/
color:#000000;/*文字の色*/
background-color:#;/* 背景の色 */
background-image : url("image/igokabe.gif");/* 背景の画像( 壁紙) */
padding-top : 0px;
border-top-width : 0px;
margin-top : 0px;}
 
#site-box{width:780px;margin-left:0px;margin-right:0px;
border-top:1px solid #009900;border-left:1px solid #009900;
border-right:1px solid #009900;border-bottomt:1px solid #009900;
background-color:#ccffcc;/* 背景の色 (枠内の背景色)*/padding:0px; }
#a-box{width:780px;height:190px;margin:0px;padding:0px;}
#marque{
background-color:#00cccc;width:780px;height:30px;vertical-align:middle;
align:left;font-weight:bold;font-size:medium;font-color:black;
margin:0px;padding : 0px;}
#b-box{width:237px;
float:left;/*左に回りこみ*/
border-width:1px 0px 0px 0px;
border-color:#009900;
border-style:solid;
align:left;
text-align:left;
padding-top :0px;
padding-left :0px;
padding-right :25px;
padding-bottom : 0px;
margin:0px;}

h4.item{
background-color:#99ff99;
width:170px;
text-align:center;
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
margin-top : 0px;}

ol.new{
list-style:decimal /*算用数字*/
margin:0px;
padding:;
padding-left:em;/*左の詰め 文字分*/
margin-left:em;/*左の余白 文字分*/
background-color:#ccffcc;/*背景色*/
}


#c-box{width:540px;
float:right;/*右回り込み*/
border-width:0px;
border-width:0px 0px 0px 1px;
border-color:#009900;
border-style:solid;
background-color:#ccffcc;/*背景色*/
align:right;text-align:left;
padding-top : 0px;
padding-left :0px;
padding-right : 0px;
padding-bottom : 0px;
margin:0px;}
#c1-box{width:540px;
border-width:1px 0px 1px 0px;
border-color:#009900;
border-style:solid;
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
margin:0px;
background-color:#ccffcc;/*背景色*/
align:right;

h4.item-r{
background-color:#99ff99;
width:170px;
text-align:center;valign="top" }}
#c2-box{width:540px;
border-color:#009900;
border-width:1px 0px 1px 0px;
padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
background-color:#ccffcc;/*背景色*/
margin:0px;align:right;}
#c3-box{width:540px;text-align:left;
border-width:1px 0px 0px 0px;
align:right;margin:0px;
border-color:#009900;
border-style:solid;
padding-top : 2px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
background-color:#ccffcc;/*背景色*/}
#c4-box{width:540px;align:right; text-align:left;text-valign:top;
background-color:#ccffcc;/*背景色*/
border-width:1px 0px 0px 0px;
border-color:#009900;
border-style:solid;
padding-top : 2px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
margin:0px;}
#d-box{width:780px;clear:both;}

table.foot{ background-image:;/* 背景の画像 */background-color:#99ff99;
width:780px;/*778-2*/height:70px;font-size:12px;/*文字の大きさ*/
text-align:center;/*文字の寄せ方*/
border-width:1px;border-color:#009900;border-style:solid;
border-top:1px solid #009900;border-left:1px solid #009900;
border-collapse:collapse;border-spacing:0;empty-cells:show;
cellpadding:0px;cellspacing:0px;padding-top : 0px;padding-left : 0px;
padding-right : 0px;padding-bottom : 0px;}

.foot td{ border-right:1px solid #009900;
border-bottom:1px solid #009900;padding:0px;}

img#float2{ float:right;}

/*リンク関係*/
a:link {/*リンクされた文字の色*/color:000000;/*文字の色:青*/font-style:normal;font-size:;
text-decoration:none;/* 下線なし */a:visited {/*訪問後の色*/
color:#000000;/*文字の色:紫*/text-decoration:none;/* 下線なし */}
a:hover {/*カーソルを合わせたときの色*/color:#ff0000;/*文字の色:赤*/
font-style:normal;text-decoration:none;/* 下線 なし*/}
a:active {/*クリック中の色*/text-decoration:none;/* なし */}
(参考)ボックスモデル

CSSにおいては、全ての要素はその周囲を取り囲む長方形のボックスを持つと考え、
その枠や余白に様々なプロパティを与えていろいろなスタイルを実現します。
ボックスは、文字などの要素のコンテント領域、borderという枠、コンテントと枠の間に相当する
padding、枠と隣接するボックスの境界までの余白であるmarginという要素で構成されます。

ボックスモデルの図:borderの外側にmargin, 内側にpadding領域がある

border, margin, paddingのいずれのプロパティも、4方向をまとめて設定することもできれば、
-top, -bottom, -right, -leftという修飾子をくわえた(たとえばmargin-top)プロパティとして、
上下左右を個別に設定することもできます。

   
CSS margin(マージン)とpadding(パディング)の違い

margin(マージン)とpadding(パディング)の違いは簡単に言ってしまえば、
背景ごと移動するのがmargin(マージン)、
中の文字だけ移動するのがpadding(パディング)です。
下記のように背景の設定がしてあるタグにそれぞれ30pxの余白を設定します。

margin-left:30px を設定した場合、タグそのものがまるまる30px移動します。
padding-left:30px を設定した場合中身の文字だけが30px移動します。