ホームページ作成の基礎からご提供するホームページ作成Space

ホームページやブログなどのウェブサイトでは、HTML言語の OL タグや LI タグを使って、文章を箇条書きにして表示することができますが、これらのタグを使うと、通常自動で 文章の上下や左に余白がとられます。

スタイルを指定しない場合、デフォルトでの余白の量はブラウザの場合によってまちまちですが、必要に応じて、この余白を指定したほうがいいかも知れません。

このとき、各要素の領域の捉え方が異なるため、余白（マージンやパディング）を指定した際の挙動がブラウザにより大きく異なるので、注意が必要です。

このサンプルは、わかりやすいように各要素の背景色を指定しています。このソースを、InternetExplorer と Netscape の両ブラウザでそれぞれ表示させると、次のようになります。

• InternetExplorerの場合
  
• Netscapeの場合
  

デフォルトでは両方ともだいたい同じように見えますが、IEは マージンのみで、NNはパディングのみで数字や記号の表示領域（幅）を確保しています。

このため IEでデフォルトのマージンが多すぎるな、と思ってマージンを指定すると、 NNではマージンが0から増える格好になりますのでブロック全体がさらに右側に下がります。一方NNでパディングが多すぎるな、と思ってパディングを指定すると今度は IEで0だったパディングが増えますので右側に下がります。

両ブラウザの考慮して調節しましょう。上記のソースで、インデントを少し抑えたかたちにしてみます。