block / inline-block / inline 違い

block要素

・親要素の内容幅の全体に広がって配置される。

例

p div table ul ol form h1~h6 hr

inline要素

・書式設定・強調など文中の一部分にだけの使用される。
・block要素の中にインライン要素を配置することはできるが、逆はできない。

例

span a strong

inline-block要素

・inlineでありながら横幅や縦幅の指定ができる。
・html上の改行も反映して隙間が空いてしまうため、
間はコメントアウトしておく。

例

img input button