リスト(ul要素)を装飾した際の表示差を解消(2ページ目)

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

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

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

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

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

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