BlogでHTML日進月歩

HTML及びCSSの理解を深め、Webサイト作成初級者からの脱却を目指します。

エントリー記事

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

このページの一番上へ

ブロック要素の余白

多くの視覚系ブラウザは、デフォルト状態でブロック要素に一定の余白を適用します。例えば見出し段落は上下に1行分の余白を伴い、リストは左に余白を取って字下げを行います。

これらは、スタイルシートでページをレイアウトする際に邪魔になることがあります。特に、順番つきリスト順番なしリストの左側の余白には注意を払う必要があります。

  1. マージンとパディングの両方をゼロに指定すると、リストマークが左側にはみ出します。

  2. リストマーク左側の余白は、ブラウザによって解釈が異なります。IEやOperaではul要素またはol要素のマージンとして解釈されますが、Gecko系ブラウザ(*1)ではパディングとして解釈されます。

IEやOpera、Gecko系ブラウザのどちらでもレイアウトを崩さないために、はじめに全要素の余白をゼロに指定して、その後必要に応じて適宜加える方法を推奨します。

*{ margin:0; padding:0; }
ul li{ margin-left:1em; }
ol li{ margin-left:1.5em; }
(*2)

(*1)
Mozilla , Netscape , Firefox等を指します。
(*2)
このように左側の余白を指定することで、リストマークの開始点を他のブロック要素に近づけることができます。
スポンサーサイト

このページの一番上へ

連絡先、広告

copyright © 2005-2006 セロリ
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。