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指定だけをして、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指定だけをして、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 |
両方を指定するとFirefoxもIEも表示が揃います。
ブラウザ | Firefox | InternetExproler | ||
プロパティ | margin | padding | margin | padding |
初期値 | 0 | 40px | 40px | 0 |
指定値 | 20px | 40px | 20px | 40px |
適用値 | 20px | 40px | 20px | 40px |
計 | 60px | 60px |
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-zero | 0を上位につけた算用数字(01, 02, 03, 04…) |
hebrew | ヘブライ文字の数字(ヘブライ数字) |
armenian | アルメニア文字の数字(アルメニア数字) |
georgian | グルジア文字の数字(グルジア数字) |
cjk-ideographic | 漢数字(一, 二, 三, 四…) |
hiragana | 平仮名(あ, い, う, え…) |
katakana | 片仮名(ア, イ, ウ, エ…) |
hiragana-iroha | 平仮名のいろは(い, ろ, は, に…) |
katakana-iroha | 片仮名のイロハ(イ, ロ, ハ, ニ…) |
lower-latin | lower-alpha と同じ、英小文字(a, b, c, d…) |
upper-latin | upper-alpha と同じ、英大文字(A, B, C, D…) |
lower-greek | 小文字のギリシア文字(α, β, γ, δ…) |