[解決済み] インラインブロックリストのアイテム間のスペース [重複]について

質問

重複の可能性があります。

インラインブロックのリスト項目における不要なマージン

HTMLから「見えないスペース」を取り除く方法

インラインブロックのリスト項目には、なぜスペースがあるのですか？リスト項目をどのようにメニュー化しても、必ずスペースが入ってしまいます。

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>

解決方法は？

以前にもこのようなことがあり、回答したことがあります。

後 さらなる研究 私は を発見しました。 inline-block は 空白に依存するメソッドであり はフォントの設定に依存します。この場合、4pxがレンダリングされます。

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

<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の可読性に優れます（タグの連結を避けるなど）。スペーシングの効果はフォントのスペーシング設定によるものなので、インライン化された要素についてはそれをリセットし、中のコンテンツについては再度設定する必要があります。