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

締切済

質問者：GGJOPCQZBU
質問日時：2014/10/05 11:30
回答数：3件

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

<ol>
<li>aaa</li>

<li>bbb</li>

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

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ORUKA1951
回答日時：2014/10/05 14:57

ウェブ製作でしたら、当然firefoxをお使いだと思いますが、その開発者向けツール(

https://addons.mozilla.jp/firefox/extensions/dev … )に 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/CSS … )］より

　そのために、著者やユーザーが別途スタイルを指定しない場合、ブラウザのもつデフォルトのスタイルが適用された結果です。
　具体的には、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
・・・【中略】・・・
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/CSS … )］より
　が、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;
}
のように、すべて再設定するとブラウザ間の誤差も回避できます。