わかってるつもりで、なんとなく使っていた block と inline 、inline-block 。
Bootstrap4 の d-flex と d-inline-flex を使い分けようとしたときに、厳密にわからないままに使用していたことに気づいたので、ちょっと整理してみることにしました。
簡単に言うと
- block は、幅100%で縦に積み上げていくレイアウトなどに使用。段落単位に適用
- inline は、基本滝にblockの中の部分に使用。行の中の単語や文字単位に適用
- inline-block は、行の中に高さを変えられる小段落があるようなイメージ。主に要素を横に並べたいときなどに使用
整理すると下表のようになるということですね。
| inline | inline-block | block | |
|---|---|---|---|
| 代表的なタグ | a、span など | img など | div、p、ul など |
| 配置 | 横に並ぶ | 横に並ぶ | 縦に積まれる |
| 幅 | 内容サイズ | 内容サイズ | 親要素100% |
| width | × | ○ | ○ |
| height | × | ○ | ○ |
| margin | 左右のみ○ | ○ | ○ |
| padding | 左右のみ○ 上下△ | ○ | ○ |
| text-align | × | ○ | ○ |
| vertical-align | ○ | ○ | × |