WEB系キャンパス

displayinline-blockで横並びにした時の謎の空白で段落ちする時の対処法

レスポンシブサイト作成時に、displayinline-blockで要素を横並びにした時にwidth値とmargin値をピッタリ100%にすると、最後のリストが段落ちしてしまう時の対処法。

要素の検証で調べると、<li>と<li>の間に謎の空白が…

【回避法01】</li>の空白を消す

この方法はマークアップがべらぼうに見づらくなるので、あまり好みではない。

<ul class="list01">
  <li>BOX01</li><li>BOX02</li><li>BOX03</li><li>BOX04</li>
</ul>

【回避法02】フォントサイズを調整する

<li>を囲む<ul>をまず「font-size: 0;」にして、<li>でフォントサイズを指定する方法。こっちのほうが現実的。<li>でフォントサイズを指定しないと<li>内のテキストが消えてしまうので注意。

ul{
  font-size: 0;
}
ul  li{
  font-size: 16px;
}

DEMO

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です