●ボックス（四角形）の構成（文字など、padding、border）

○【例文】の中には、解るように「全角」の記号を書いていますが、
　実際に文を作る場合は、必ず「半角」の記号に取り換えてください。
○【例文】の行が長くなる場合は、途中の行で「 ↓連続」を書き、
　最後の行末を「 <--改行」で書いています。
○【実際】の文を作成する場合は、「 ↓連続」と「 <--改行」を全部、削除してください。

ボックス（四角形）の面

○Yahoo! ブログの記事に使うボックス（四角形）の面は、真ん中から順に
　「内容（文字、文字列、画像など）」→「内容の周りの空間（padding）」→「枠線（border）」
　になります。

○前は「枠線（border）」まで設定していましたが（既存のHPの本でも）、
　Internet Explorerの「幅（width）」と「高さ（height）」が変更されたようです。

【例文】

○内容・・・文字、文字列、画像など
○空間・・・（内容の周りの空間の）padding プロパティ
○枠線・・・border プロパティ
○幅・・・・width プロパティ
○高さ・・・height プロパティ

【実際】


■■■■■■■文字など■■■■■■■	￣内容＿	＝	￣高さ＿	￣↑│空間↓＿	￣↑││枠線│↓＿
\|←－－内容－－→\|
\|｜
\|←－－_幅_－－→\|

\|←－－－空間－－－－→\|

\|←－－－－枠線－－－－－→\|

○ちなみに、ボックス（四角形）の「内容（文字、文字列、画像など）」だけのものと、
　「内容と内容の周りの空間」を参考にします。

【例文】

○内容（一文字＝width:20px; height:20px;）のみ（空間なし＝padding:0px;）
※イメージ
■

||<#cccccc' style=' width:20px; height:20px; padding:0px; font:20px monospace;
color:red;' ``■||
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
○内容（一文字＝width:20px; height:20px;）と、内容の周りの空間（padding:20px;）
※イメージ
□□□
□■□
□□□

||<#cccccc' style=' width:20px; height:20px; padding:20px; font:20px monospace;
color:red;' ``■||
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
○内容（三文字＝width:60px; height:20px;）と、内容の周りの空間（padding:20px;）
※イメージ
□□□□□
□■■■□
□□□□□

||<#cccccc' style=' width:60px; height:20px; padding:20px; font:20px monospace;
color:red;' ``■■■||
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
○内容（一文字と空白＝width:60px; height:20px;）と、内容の周りの空間（padding:20px;）
※イメージ
□□□□□
□■　　□
□□□□□

||<#cccccc' style=' width:60px; height:20px; padding:20px; font:20px monospace;
color:red;' ``■||

【実際】

○内容（一文字＝width:20px; height:20px;）のみ（空間なし＝padding:0px;）

■

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
○内容（一文字＝width:20px; height:20px;）と、内容の周りの空間（padding:20px;）

■

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
○内容（三文字＝width:60px; height:20px;）と、内容の周りの空間（padding:20px;）

■■■

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
○内容（一文字と空白＝width:60px; height:20px;）と、内容の周りの空間（padding:20px;）

■