[CSS]line-heightとpaddingの使い分け方、リストの各アイテムの間隔を設定するテクニック

メニューなどをリストで実装する時に、クリックができないデッドゾーンができてしまうことがあります。この問題を解決するline-heightとpaddingを使い分けて実装するテクニックを紹介します。

In CSS, set line-height first, padding second

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• 何が問題か？
• 何が起きているか？
• 解決方法はありますか？

何が問題か？

ハッカーニュースを見ていたら、Zapierブログのこの記事を見つけました。
このメニューにおける問題に気付かないわけにはいきませんでした。

Zapierのメニュー

問題はこのメニューに、クリックが出来ないデッドゾーンがあることです。

クリックのデッドゾーン

この問題は珍しいものではなく、よく見かけるものです。これを解決するシンプルなテクニックがあります。

何が起きているか？

この現象の原因は、リストの各アイテムに間隔を空けるために「line-height」を使用しているためです。

この「line-height: 2em;」が原因です！
リストの各アイテムが一行であれば問題はありませんが、複数行であればデッドゾーンが出来てしまいます。

解決方法はありますか？

解決方法を尋ねられて、私は嬉しく思います。
まずは、CSSのシンプルなルールを確認しておきましょう。

line-height

line-heightはリーダビリティのために使用されるべきです。

padding

paddingはアイテムに間隔を空けるために使用されるべきです。

各アイテムの高さを2emに保たせ、メニューにあるクリックのデッドゾーンを無くしてみましょう。
まずは、アイテムのリーダビリティのために「line-height: 1.2em;」を設定します。

これで一行の高さが、1.2emになります。
この時点では、2.0emに0.8em欠けています。

paddingは各アイテムの間隔の上下に適用されるので、半分の値で設定します。

これで完成です！

クリックのデッドゾーンを無くしたデモ

一行のアイテムも複数行のアイテムも同じ間隔で配置されており、複数行にクリックのデッドゾーンは無くなりました。リーダビリティも確保されています。