☰

インラインブロックリスト項目間のスペース [重複] 質問する

tag-icon • tag-icon html css xhtml
インラインブロックリスト項目間のスペース [重複] 質問する

重複の可能性あり:
インラインブロックリスト項目の不要な余白
HTMLから「見えないスペース」を削除する方法

リスト項目にスペースが入っているのはなぜですかinline-block? リスト項目をメニューに作成する方法に関係なく、常にスペースが入っています。

li {
  border: 1px solid black;
  display: inline-block;
  height: 25px;
  list-style-type: none;
  text-align: center;
  width: 50px;
}

ul {
  padding: 0;
}
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

ベストアンサー1

私は以前これを見て、それに答えました:

後さらなる研究inline-blockこれは空白に依存する方法であり、フォント設定に依存することがわかりました。この場合、4px がレンダリングされます。

これを回避するには、すべてのタグを 1 行にまとめて実行するliか、次のように終了タグと開始タグをまとめてブロックします。

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li>
</ul>

例はこちら。

他の回答やコメントで述べられているように、これを解決するためのベストプラクティスは、font-size: 0;親要素に追加することです。

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

これは HTML の読みやすさを向上させる (タグが一緒に実行されるのを避けるなど) ためです。間隔効果はフォントの間隔設定によるため、インライン要素に対して間隔をリセットし、その中のコンテンツに対して再度設定する必要があります。

おすすめ記事