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

2021.4.1 移転しました...

• このページの旧URLは
  • http://www10.plala.or.jp/palm84/css_memo_list.html

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

CSS指定なし

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

枠線以外の見た目はそれ程差はないと思いますけど、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;
}

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

基本設定を考える

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

ここがミソ

• 数字・記号を表示させるには、padding-left を指定する。2em程でギリギリかな。
• 要素のネスト（入れ子）に注意する。ネストのmargin, padding は0にする
  • font-size:0.8em と指定した場合、ネストするとどんどん小さくなるので、ネストに font-size:1em を指定しておく
• 行間は line-height で調整
  • しかし、折り返し行にも適用されるので、line-height は折り返し用に小さく設定、li要素の margin-top, margin-bottom を設定した方がいいかもしれない

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;
}

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

備考

最終更新日：2010.5.5

• ul要素とol要素のブラウザごとの違い - Web標準普及プロジェクト

【基本】値の指定個数

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

• 4つ - 上, 右, 下, 左（時計回り）
• 3つ - 上, 左右, 下
• 2つ - 上下, 左右
• 1つ - 一括

• ←
• H
• ↑
• ↓