入れ子のul/olのmargin-bottomを調整した

このブログのolとulのCSSを調整した。

環境

  • wordpress 5.7

現象

今までまあいいかで済ませていたが、改めて見てみると入れ子になっているulolのリストの下部分の余白がよろしくない。

インスペクタで見てみると、ulolmargin-bottomが1.4remにセットされていた。 この状態だとどういう風になるのかというと:

<ul>
  <li>Mac
    <ul>
      <li>Macbook Air</li>
      <li>Macbook Pro</li>
      <li>iMac</li>
    </ul>
  </li>
  <li>iPad
    <ul>
      <li>iPad Pro</li>
      <li>iPad Air</li>
      <li>iPad</li>
    </ul>
  </li>
</ul>

というhtmlがあると、こうなってしまう:

  • Mac
    • Macbook Air
    • Macbook Pro
    • iMac
  • iPad
    • iPad Pro
    • iPad Air
    • iPad

入れ子になっているulolmargin-bottomも空間を確保してしまう。その結果、親側のli同士で不自然な空間ができてしまう。 上の例だと、iMaciPadの間がやけに空いてしまう事態になる。

対処法

テーマのデフォルトでこのような設定になっているので、これを上書きすれば回避できる。 上書き方法は2通りある。

wordpressのダッシュボードから、外観 --> テーマエディターに飛んで、CSSを記述するだけ。 記事内容部分に限定したほうがいいので、articleや記事内のクラスなどを使ってCSSセレクタの対象は狭めておいたほうがいいだろう。

CSSの例:

.article ul {
  margin-bottom: 0;
}

.article ol {
  margin-bottom: 0;
}

例えばこのようにすると:

  • Mac
    • Macbook Air
    • Macbook Pro
    • iMac
  • iPad
    • iPad Pro
    • iPad Air
    • iPad

上のようになり、不自然さは減る。各項目が長くなると、もう少し空間があってもいいかなとは思う。

おわり

ちょっと修正しただけで記事を作るのもどうかと思うが、入れ子で使うときに割と困惑するので、記録しておく。

上の例では要素のstyle属性に埋め込んでいるがそんなことはあまりしたくない。

以上です。

タイトルとURLをコピーしました