ブロック要素とインライン要素の違い

簡単に説明するとブロック要素はブロックなので縦に積み上げるもの。

インライン要素はインラインなので、横に並ぶもの。

そんな感じで理解しています。

<ul><li>はブロック要素なので、このように書くと縦に積みあがって表示されます。

<ul>
　<li>リスト１</li>
　<li>リスト２</li>
　<li>リスト３</li>
　<li>リスト４</li>
</ul>

• リスト１
• リスト２
• リスト３
• リスト４

しかし、CSSでこのように書くと

li {
　display: inline;
} 

• リスト１
• リスト２
• リスト３
• リスト４

とブロック要素がインライン要素に変わり横に並んで表示されるようになります。

インライン要素はwidthやheightがきかない！

インラインなので高さがないのはわかるが、幅の指定もできません。

そうゆうときはinline-block

li {
  display: inline-block;
  height: 50px;
  width: 100px;
}

inline-blockにすることで、インライン要素なのに幅と高さを指定できるようになります。