もくじ
もくじ

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

FirefoxとInternetExprolerの初期値の違い

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

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

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

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

この初期値はFirefox2.0とインターネットエクスプローラ6.0のものです。バージョンがあがると変わるかも知れませんが、だからこそ両方指定するのが無難です。

なにも指定しないとき

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

ブラウザ Firefox InternetExproler
プロパティ margin padding margin padding
初期値 0 40px 40px 0
指定値 なし なし なし なし
適用値 0 40px 40px 0
40px 40px

margin指定だけ

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

ブラウザ Firefox InternetExproler
プロパティ margin padding margin padding
初期値 0 40px 40px 0
指定値 20px なし 20px なし
適用値 20px 40px 20px 0
60px 20px

padding指定だけ

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

ブラウザ Firefox InternetExproler
プロパティ margin padding margin padding
初期値 0 40px 40px 0
指定値 なし 20px なし 20px
適用値 0 20px 40px 20px
20px 60px

margin, paddingの両方を指定

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

ブラウザ Firefox InternetExproler
プロパティ margin padding margin padding
初期値 0 40px 40px 0
指定値 20px 40px 20px 40px
適用値 20px 40px 20px 40px
60px 60px

type

noneマーカー(行頭記号)を表示しない
disc黒丸
circle
square四角
decimal算用数字(1, 2, 3, 4…)
lower-roman小文字のローマ数字(i, ii, iii, iv…)
upper-roman大文字のローマ数字(I, II, III, IV…)
lower-alpha英小文字(a, b, c, d…)
upper-alpha英大文字(A, B, C, D…)
decimal-leading-zero0を上位につけた算用数字(01, 02, 03, 04…)
hebrewヘブライ文字の数字(ヘブライ数字)
armenianアルメニア文字の数字(アルメニア数字)
georgianグルジア文字の数字(グルジア数字)
cjk-ideographic漢数字(一, 二, 三, 四…)
hiragana平仮名(あ, い, う, え…)
katakana片仮名(ア, イ, ウ, エ…)
hiragana-iroha平仮名のいろは(い, ろ, は, に…)
katakana-iroha片仮名のイロハ(イ, ロ, ハ, ニ…)
lower-latinlower-alpha と同じ、英小文字(a, b, c, d…)
upper-latinupper-alpha と同じ、英大文字(A, B, C, D…)
lower-greek小文字のギリシア文字(α, β, γ, δ…)

ウェブページ(Aug.2008)
聖愛中学高等学校
http://www.seiai.ed.jp/