各ブラウザが ul, ol 要素に適用するスタイルに関するメモ

Category : CSS, HTML

CSS を書くとき、いつも ul, ol 要素のデフォルトスタイルのことを忘れてて悩むので、デフォルトだとどういう感じで表示されるかメモしておきます。
確認したブラウザは

  • Internet Explorer 6, 7, 8
  • Opera 9.6
  • Firefox 3.0
  • Google Chrome 2.0

Safari は Chrome と同じ表示になるので省略。
ul 要素に marginpadding を指定したりして試しました。

他には何も指定しなくてもよかったんだけど、やってみたら分かりづらかったので
ul 要素に 1px のボーダー、それを囲む div 要素に背景色と padding:5px を指定。

marginpadding どちらも指定なしの場合の場合

margin,padding どちらも指定なしの場合の場合

margin-left:0 を指定し、padding は指定なしの場合

margin-left:0 を指定し、padding は指定なしの場合

margin 指定なし、padding-left:0 を指定した場合

margin 指定なし、padding-left:0 を指定した場合

margin-left:0padding-left:0 を指定した場合

margin-left:0 と padding-left:0 を指定した場合


表示が違うのは IE7 以下か……。
リストは頻繁に使用するから気をつけないと。

ul, ol 要素を使うつもりならスタイルシートの最初の方で

ul, ol {
	margin: 0;
	padding: 0;
}

こんな感じにリセットしておく、と。

Leave a Reply