わかってるつもりで、なんとなく使っていた block と inline 、inline-block 。

Bootstrap4 の d-flex と d-inline-flex を使い分けようとしたときに、厳密にわからないままに使用していたことに気づいたので、ちょっと整理してみることにしました。

簡単に言うと

  • block は、幅100%で縦に積み上げていくレイアウトなどに使用。段落単位に適用
  • inline は、基本滝にblockの中の部分に使用。行の中の単語や文字単位に適用
  • inline-block は、行の中に高さを変えられる小段落があるようなイメージ。主に要素を横に並べたいときなどに使用

整理すると下表のようになるということですね。

inlineinline-blockblock
代表的なタグa、span などimg などdiv、p、ul など
配置横に並ぶ横に並ぶ縦に積まれる
内容サイズ内容サイズ親要素100%
width×
height×
margin左右のみ○
padding左右のみ○ 上下△
text-align×
vertical-align×