Inline-blockによる要素間の空白を除去

複数の要素に対してinline-blockを使用すると、要素間に空白のテキストが埋め込まれ、表示上は2つの要素間に隙間があります.ある場合、1行に2つの要素があります.この2つの要素に対してinline-blockを使用してwidth:50%を同時に設定すると、折り返し行が発生します.この場合、空白によるもので、空白を解決するいくつかの方法があります.

親要素にfont-sizeを設定:0

.inline-block-list { /* ul or ol with this class */
  font-size: 0;
}
.inline-block-list li {
  font-size: 14px; /* put the font-size back */
}

注釈

を追加

  
Item content
Item content
Item content

margin

.inline-block-list li {
  margin-left: -4px;
}

ラベル

を下に移動する.

   
Item content
Item content
Item content

リファレンスリンク