トップページ スタイルシート ボックス(枠)用雛形
マージン
●マージンの指定 → サンプルを見る 
↓[box_margin.css]

body { margin: 0 }
p {
text-align: center;
padding: 10px;
border: solid 2px #999999;
color: #008000;
font-size: 11pt;
background: #e0ffff
}
#sample1 { margin: 0 }
#sample2 { margin: 50px }
#sample3 { margin: 100px }
#sample4 { margin-right: 50% }
#sample5 { margin-left: 50% }
ページマージン
●ページ内容の周りのマージンの指定 → サンプルを見る 
↓[page_margin.css]

p {
border: solid 2px #999999;
color: #008000;
font-size: 11pt;
background: #e0ffff
}
#sample1 { padding: 0 }
#sample2 { padding: 10px }
#sample3 { padding: 30px }
#sample4 { padding-right: 50% }
#sample5 { padding-left: 50% }
ボックスの枠線
●ボックスの枠線の太さを指定 → サンプルを見る 
↓[box_waku.css]

p {
text-align: center;
padding: 10px;
border: solid #999999;
color: #008000;
background: #e0ffff
}
#sample1 { border-width: 1px }
#sample2 { border-width: 5px }
#sample3 { border-width: 10px }
#sample4 { border-width: 20px }
#sample5 { border-width: 30px }
#sample6 {
border-left-width: 100px;
border-right-width: 100px;
}
ボックスの枠線の色
●ボックスの枠線の色を指定 → サンプルを見る 
↓[box_wakucolor.css]

body { margin: 10px }
p {
text-align: center;
font-size: 11pt;
color: #008000;
padding: 10px;
border: solid 5px;
}
#sample1 { border-color: red }
#sample2 { border-color: blue }
#sample3 { border-color: yellow }
#sample4 { border-color: green }
#sample5 {
border-top-color: #ff0000;
border-bottom-color: #0000ff;
border-left-color: #ffff00;
border-right-color: #008000
}
ボックスの枠線の種類
●ボックスの枠線の種類を指定 → サンプルを見る 
↓[box_wakutype.css]

p {
text-align: center;
font-size: 11pt;
padding: 10px;
border: solid 6px #999999;
}
#sample1 { border-style: none }
#sample2 { border-style: solid }
#sample3 { border-style: double }
#sample4 { border-style: dashed }
#sample5 { border-style: dotted }
#sample6 { border-style: groove }
#sample7 { border-style: ridge }
#sample8 { border-style: inset }
#sample9 { border-style: outset }