<ol><li> 左側にスペースができてしまう

質問

<ol>
<li>
タグを使うと、左側にスペースができてしまう。

<ol>
<li>aaa</li>

<li>bbb</li>

<li>ccc</li>
</ol>

をすると、番号の左に若干スペースができてしまいます。

このスペースを作らないようにするにはどうすればいいでしょうか？

回答No.3

ORUKA1951

ウェブ製作でしたら、当然firefoxをお使いだと思いますが、その開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )に Firebug( https://addons.mozilla.jp/firefox/details/1843 )があります。
　それで確認すると一目瞭然なのですが、ol要素、li要素には、paddingと、marginがあることが確認できます。

スタイルシートのカスケーディングの仕組みで、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
6.4.4 非CSSの見栄えヒントの優先順位
　ユーザーエージェントは、HTMLソースドキュメントの体裁用の属性を尊重してよい。その場合、これらの属性は0に等しい詳細度と対応するCSS規則に変換され、それらは著者スタイルシートの先頭に挿入されたかのように扱われる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［6.4.4 非CSSの見栄えヒントの優先順位( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#preshint )］より

　そのために、著者やユーザーが別途スタイルを指定しない場合、ブラウザのもつデフォルトのスタイルが適用された結果です。
　具体的には、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
・・・【中略】・・・
li{ display: list-item }
・・・【中略】・・・
ol, dl, dir, menu { margin: 1.12em 0 }
・・・【中略】・・・
ol, ul, dir,menu, dd{ margin-left: 40px }
ol{ list-style-type: decimal }
ol ul, ul ol,ul ul, ol ol { margin-top: 0; margin-bottom: 0 }

￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［D. HTML 4のためのデフォルトスタイルシート( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/sample.html )］より
　が、ol,liに指定されています。
★marginで余白を取るかブラウザで余白を取るか、またlist-style-positionをどの位置にするかは、実際にはブラウザによって異なりますから、
ol{margin-left:1em;padding:0;}
などでしたら、ブラウザ間の表示差が避けられませんから、
ol{
margin:0.5em 0;
padding:0;
list-style-position:1em;
line-height:1.4em;
}
ol li{
margin-left:2em;
padding:0;
}
のように、すべて再設定するとブラウザ間の誤差も回避できます。

お礼

ありがとうございました。

回答No.2

neuron-x

OLに対して、スタイルシートを適用すればスペースを詰めることができます。
スタイルシートの適用方法には色々ありますが、OLタグ全てに適用する場合は次のようなスタイルシートを定義すると良いですよ。
※マージンも0pxにしてしまうと、リスト番号が画面外にはみ出して表示されなくなるので要注意！

ol{
　　margin-left:1em;
　　padding:0px;
}

お礼

ありがとうございました。

回答No.1

root8110

cssで下記のように指定してください。

ol { padding-left:1em; }

お礼

ありがとうございました。