トップページ > スタイルシート > CSSでリストを作る時のmarginとpadding

CSSでリストを作る時のmarginとpadding

スタイルシートでリスト（ul）を作成する際に、
Internet ExplorerとFirefoxやoperaで表示がズレることがある。

具体的には、

<ul>
<li>aaaaaaaa</li>
</ul>

これに、

ul { margin:20px; }

と設定したところ、

Firefoxやoperaでは通常に（意図した通りに）表示されるのだが、
Internet Explorerでは、Firefox等の表示より、左にリストがズレてしまうのである。

まあ、スタイルシートの個々の設定によって状況が異なると思うので、
一概に対策を言える程の物ではないが、殴り書き程度の対策を記しておく。

この場合、ul タグでmarginは設定したがpaddingは設定してこなかった。
原因はともかく、paddingも設定して、

ul { margin:20px; padding:0px }

こう設定すると、スタイルシートでリスト作成時にIEとその他ブラウザで差が生じることがなくなった。