ul,ol要素の設定の設定 - CSSめも

Tweet はてなブックマーク TOPSY

margin と padding はどうなっているの?

CSS指定なし

赤線がul,ol要素の枠、青線はli要素です。

  1. 水泳部で睡眠グゥー!
  2. Operation Peace of Church
    • Gの侵入を阻止せよ
  3. 3年B組クマーしやがって
    1. はてなのこのこ電波な子
  4. やさしく殺して

枠線以外の見た目はそれ程差はないと思いますけど、IE6/7で見るとなんかおかしいですね。IE7では margin-left を指定して記号・数字を表示させている模様です。

Opera9,Firefox2では padding-left が設定されていました。ネストは0設定みたいです?

Opera9,Firefox2では上下 margin が1em 左右margin は0。

margin と padding を0にしてみる

ul,ol { margin: 0;
        padding: 0;
        border: 1px solid red;
}
ul ul,ul ol,ol ul,ol ol {
       margin: 0;
       padding: 0;
}
li {   margin: 0;
       padding: 0;
       border: 1px solid blue;
}
  1. 水泳部で睡眠グゥー!
  2. Operation Peace of Church
    • Gの侵入を阻止せよ
  3. 3年B組クマーしやがって
    1. はてなのこのこ電波な子
  4. やさしく殺して

記号・数字がはみ出しちゃってますね。つまり、記号・数字は枠に含まれていないってことですか。

基本設定を考える

IE7の初期状態では paddin-left ではなく margin-left の値が設定されているので、ブラウザごとの表示を統一するためには、margin, padding をきっちり指定しておく必要があるみたいですねん。うんうん。

ここがミソ
ul,ol { margin: 1em 0;
        padding: 0 0 0 2.5em; 
        font-weight: normal;
        line-height: 120%;
}
ul ul,ul ol,ol ul,ol ol {
        margin: 0;
        padding: 0 0 0 1em;
        font-size: 1em;
}
li {    margin: 0.2em 0;
        padding: 0;
}
  1. 水泳部で睡眠グゥー!
  2. Operation Peace of Church
    • Gの侵入を阻止せよ
  3. 3年B組クマーしやがって
    1. はてなのこのこ電波な子
  4. やさしく殺して
  5. ♥ ガチャコ マイ ラブ ♥
  6. どうぞ¥¥やらしく¥¥
  7. 100m3
  8. H2Oがいっぱい
  9. ヘブライ語
  10. ♠ ♣ ♥ ♦

実際に書く場合は、記号・表示が枠外であってもページに表示されればいいわけですから、ページの状態に合わせて左paddingだけ調整しやがってくださいまし、ってかんじですか。

備考

最終更新日:2010.5.5

【基本】値の指定個数

margin や border など 上下左右を指定する場合


Valid HTML 4.01! Valid CSS!