【CSS】リスト(liタグ)の左余白をなくす方法

HTML/CSS

liタグの左にはlist-style-typeのアイテムを配置するための場所が確保されています。
ですので、list-style-type: none適用したリストの場合、左に余白ができた状態になります。

<ol class="list">
  <li class="list__item">item</li>
  <li class="list__item">item</li>
  <li class="list__item">item</li>
  <li class="list__item">item</li>
</ol>


.list {
  background: lightgreen;
  list-style-type: none;
}

.list__item {
  background: lightblue;
}

See the Pen
li-left-padding-before by Toshiharu Nishina (@nishina555)
on CodePen.

liタグの左余白をなくすためにはliタグの親要素にpadding-left: 0を適用します。

<ol class="list">
  <li class="list__item">item</li>
  <li class="list__item">item</li>
  <li class="list__item">item</li>
  <li class="list__item">item</li>
</ol>


.list {
  background: lightgreen;
  list-style-type: none;
  padding-left: 0px;
}

.list__item {
  background: lightblue;
}

See the Pen
li-left-padding-after by Toshiharu Nishina (@nishina555)
on CodePen.

活用事例

padding-left: 0を利用した余白削除のテクニックは、『ページネーション』や『パンくずリスト』など、list-style-type: noneのliタグで横並びアイテムを実装する際に有効です。

<ol class="list">
  <li class="list__item">item</li>
  <li class="list__item">item</li>
  <li class="list__item">item</li>
  <li class="list__item">item</li>
</ol>


.list {
  background: lightgreen;
  list-style-type: none;
  padding-left: 0px;
  display: flex;
}

.list__item {
  background: lightblue;
}

.list__item:not(:last-child) {
  margin-right: 10px;
}

See the Pen
li-lines-without-left-padding by Toshiharu Nishina (@nishina555)
on CodePen.

参考資料

RECOMMEND