list-style-position横の隙間について

Question

Chromeで下記のcssを入力すると
文字と「list-style-type: disc」の
間に妙な空きがでてきます。
他のサイトでは問題なかったのですが
この対応策(cssハック)とかあるものでしょうか？

ul {
    list-style-type: disc;
    list-style-position: inside;
}

妙な空きとはこんな感じです↓

Answer 1

Chromium系のブラウザではアップデート後

list-style-position: inside;

を指定していると隙間が入るようになってしまったようです。
リセット系スタイルシートも効果がないようでした。

insideを指定する必要性がなければこの記述を削除し、liにインデント用marginを入れることでinsideを指定したのとあまり変わらない状態にできると思います。

ul {
    list-style-type: disc;
}
li{
  margin-left: 1.5em; //好きな値に調整
}

Comments

[cova]

ありがとうございます。
無事修正ができました！

1つ勉強になりました！

[gin]

googleもヘマをするんですな～ｗ

[dit.]

隙間の微調整をしたい場合はkei344さんの回答（li::beforeを使う）も良いと思います。
同じli内の2行目以降の開始位置が変わりますのでお好きな方を。

Answer 2

その部分を直接指定するCSSが無いため、inside を使わないか擬似要素でスタイリングするかどちらかだと思います。

ul.outside {
    list-style-type: disc;
    /*list-style-position: inside;*/
	list-style-position: outside; /* 既定値なので省略可 */
}
ul.before {
    list-style-type: none;
	list-style-position: outside; /* 既定値なので省略可 */
}
ul.before > li::before {
	content: "⚫";
	font-size: .5em;
	margin-right: .4em;
}
```**動くサンプル：**[https://jsfiddle.net/xawavd68/](https://jsfiddle.net/xawavd68/)

Comments

[kei344]

あ、解決してた。

[cova]

せっかくご回答いただいたのに
誠に申し訳ございません。

おっしゃるとおりに無事解決しました。
お手数おかけいたしました。

Answer 3

結構空いてますね…
とりあえずマーカーとテキストの間の調整はliにpadding-leftを指定するくらいです。
マイナス値は取れないので0がいっぱいいっぱいです。
空きすぎな感じがするのでひょっとしたらpadding-leftがどこかで指定されて継承しているのかもしれませんね。

Comments

[cova]

ご回答いただきありがとうございます。
「padding-left」ではなく「margin-left」で
無事解決いたしました。
ありがとうございます。

Answer 4

marginとpaddingを0にしてみてください。
ブラウザのデフォルトスタイルシートの設定が適用されています。

Comments

[cova]

お忙しい中、ご回答いただきありがとうございます。

「margin」と「padding」を「0」にしましたが、
ピクリとも動きませんでしたが、

ul {
list-style-type: disc;
}
li{
margin-left: 1.5em; //好きな値に調整
}

で修正できました。
お手数おかけいたしました。
ありがとうございます。

[yamato_hikawa]

すみません、li要素の設定を変更する必要がありましたね。