リストに標準で加えられている余白の種類が異なる

先の例のような差が出てしまうのは、リスト(ul要素)に標準で加えられている余白に差があるためです。 試しに、ul要素とli要素の周囲に枠線を引いてみるとよく分かります。
下図では、
ul要素の周囲には「青色の枠線」・「淡い青色の背景色」を、
li要素の周囲には「赤色の枠線」・「淡い赤色の背景色」を
それぞれ加えています。

IEとFirefoxでの余白の違い
▲上側:Internet Explorer / 下側:Firefox

このように表示させてみると、両者の違いがよく分かります。
(※Opera・Safari・Google Chromeも、Firefoxと同じ表示になります。)

ul要素の余白として、Internet Explorerでは「マージン(margin/外側の余白)」が加えられているのに対し、 Firefoxでは「パディング(padding/内側の余白)」が加えられています。

このため、ul要素に対して枠線や背景色を加える装飾をした際に、IEとそれ以外のブラウザでは表示が異なってしまうのです。

これを解決する方法を、次のページでご紹介いたします。