🧊

display: inline-blockとwidth: 50%の罠

項目を等幅で並べたいときに、display: inline-blockにしちゃって、幅を%指定するのはよくやると思います。
ただそこには落とし穴があって・・・。

  • width: 50%にしたのに横並びにならない
  • marginもpaddingもborderもないのに並ばない!
  • 49%にすると並ぶ・・

みたいな事態に遭遇したことはありませんか?
もう悩まない!

犯人は改行と空白文字

以下、実際に見てみてください。

横並びにしたい要素(この場合はboxクラスのついたdiv)は、改行もスペースも入れずに記述する必要があるみたいです。

どうすれば

やりかたはいくつかありますが、よくやるのはコレかな?

<ul><!--
--><li>このように</li><!--
--><li>タグとタグの間を</li><!--
--><li>コメントとして亡き者にする</li><!--
--></ul>

もちろん、

<ul><li>そもそも</li><li>改行も空白も</li><li>入る余地をなくす</li></ul>

とかでもよいです。

閉じタグを省略したりするテクもあるみたい。