• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:1.より左の空白を調整するには)

olタグを使用した場合、より左の空白を調整する方法

このQ&Aのポイント
  • olタグを使用した場合、より左の空白を調整する方法について説明します。
  • 具体的には、以下のCSSプロパティを使用することで空白を調整できます。
  • -webkit-margin-start: 0px; -webkit-padding-start: 40px;

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

<ol>や<ul>は、何もCSSを書かないと左側に空白が入ります。そのため、まずは《margin: 0;》と《padding: 0;》で余計な空白を消し、さらに《margin-left: ;》で左側の空白を調整してあげるといいです。下の例では《25px》を入れてますが、もう少し短くしたかったら20pxとか15pxとか、いろいろな数字を入れて試してみてください。 ol { margin: 0; padding: 0; margin-left: 25px; } 慣れてきたら、 ol { margin: 0 0 0 25px; padding: 0; } こんなふうに短い書き方もできます。 そのほかの《display: block;》とかは、別に書かなくても大丈夫です。

参考URL:
http://htmq.com/style/margin.shtml
EGDEKJJXI
質問者

お礼

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

その他の回答 (1)

  • syhi1121
  • ベストアンサー率0% (0/1)
回答No.2

最初の回答のやり方で問題ないと思います。 補足として・・・・・・・・ webkitなどは、例えばHTML5で記述するときにグーグルクローム・サファリのブラウザにまだ対応していない場合などに記述するもので、marginに対してはしなくても大丈夫だと思います。 htmlを <ol> <li class="li">1行目</li> <li>2行目</li> </ol> cssは .li{ margin: 0 0 0 20px; } にすると管理もしやすくなります。 後、margin-before、margin-afterの記述の仕方もこの例で言えば befor::after要素を使うのであれば .li::before{ content: ''; margin:20px; } このような記述にもなります。

EGDEKJJXI
質問者

お礼

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

関連するQ&A