ブロック要素とインライン要素

2022年3月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「ブロック要素」「インライン要素」についてまとめます。

ブロック要素

ブロック要素（Block-Level Elements）とは、コンテンツをまとめる箱のような使い方をします。

・幅と高さの指定ができる

・幅の初期値は親要素と同じ

・改行が入る（縦積み）

例：div、h1-h6、hr、p、pre、tableなど

インライン要素

インライン要素（Inline Elements）とは、文章の一部として扱われる要素です。

・幅と高さの指定ができない

・内容により幅が決まる

・改行が入らない（横並び）

例：a、code、img、input、label、span、sub、sup、textareaなど

インラインブロック要素

インラインブロック要素（Inline-Block Elements）とは、ブロック要素とインライン要素の性質を併せ持った要素です。

・幅と高さの指定ができる

・内容により幅が決まる

・改行が入らない（横並び）が、幅いっぱいになったら空気を読んで改行してくれる

display:inline-blockと指定するとインラインブロック要素になります。

横並びにしたいけど幅と高さも決めたいという時（ボタンとか）に使います。

まとめ

もう全部インラインブロックでいいんじゃないかなと思うのですが、これは素人考えでしょうか。

次回はこれらの要素を中央揃えにする方法を調べようと思います。