ulやolはmarginとpaddingをセットで

FirefoxとInternetExprolerの初期値の違い

ulやolのmarginを設定するときにはmarginと共にpaddingも設定します。インターネットエクスプローラとその他のブラウザの初期設定が異なるからです。

Firefoxは右側のmarginとpaddingの初期値がそれぞれ0と40pxになっています。次のようにして調べることができます。

インターネットエクスプローラの場合はmarginとpaddingの初期値が逆になっていて、それぞれ40pxと0になっています。次のようにして調べます。

灰色の点線がボーダーの位置です。Firefoxが・を含むのに対して、IEは含まないという違いもありますが、paddingを一致させると同じになります。背景色をつけるときには注意する必要があります。

なにも指定しないとき

なにも指定しないときはmargin,paddingの違いがあっても合計が同じなので文字の始まるところは同じです。

margin指定だけ

margin指定だけをして、padding指定をしなかった場合には元々marginが0のFirefoxは、指定したmarginの分だけmarginが大きくなりますが、IEの場合は元々のmargin指定が上書きされます。そのため指定する値によってはmarginが小さくなります。

padding指定だけ

padding指定だけをして、margin指定をしなかった場合には元々paddingが0のIEは、指定したpaddingの分だけpaddingが大きくなりますが、Firefoxの場合は元々のpadding指定が上書きされます。そのため指定する値によってはpaddingが小さくなります。

margin, paddingの両方を指定

両方を指定するとFirefoxもIEも表示が揃います。