【HTML5】ブロックレベル要素とインライン要素について

コーディングを学び始めた時につまずきやすいポイントはいくつかあると思うのですが、そのうちの1つが「ブロックレベル要素」と「インライン要素」なのではないかと思います。

CSSで指定した装飾がうまく反映されない時、原因の1つがこの要素の性質によるものかもしれません。

ブロックレベル要素とは

ブロックレベル要素は、ボックスを積み上げていくように配置されます。

See the Pen 20201111-2 by spiqa design (@spiqa_design) on CodePen.

ブロックレベル要素は、中の要素（今回は文章）の大きさにかかわらず、親要素の幅いっぱいに広がります。CSSで幅や高さの指定を行うこともできます。

ブロックレベル要素であるものの例

<address>　<article>　<dd>　<dl>　<dt>　<div>　<h1>〜<h6>　<header>　<li>　<main>　<nav>　<ol>　<p>　<section>　<table>　<ul>

インライン要素とは

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。

See the Pen 20201111-2 by spiqa design (@spiqa_design) on CodePen.

インライン要素は、中にある要素（今回は文章）の高さと幅の分のみの広さになります。そのため、親要素の幅に収まらなくなるまで横に並んで配置されます。
インライン要素は、ブロックレベル要素と異なり、CSSで幅や高さを指定することができません。（上記の例でも幅と高さを指定していますが、反映されていません。）

そのほか、インライン要素の特徴として、以下のようなものがあります。

・左右のmargin の指定ができる。（上下は指定できません。）
・padding（上下左右）の指定ができる。（ただし、上下のpadding を指定する場合、上下の要素と重なってしまう場合があるので要注意です。）
・インライン要素内にブロックレベル要素を入れるのは文法上誤りである。（インライン要素の中に、インライン要素を入れることはできます。）

インライン要素であるものの例

<a>　<br>　<button>　<img>　<input>　<span>

インライン要素に幅や高さを指定したい時には

インライン要素を「ブロックレベル要素」または「インラインブロック要素」にすることで可能になります。
※ 「インラインブロック要素」は、インライン要素と同様に中身の要素に応じた広さになりますが、CSSで幅と高さを指定することができます。

See the Pen 20201111-3 by spiqa design (@spiqa_design) on CodePen.

CSSが思ったように反映されない時など、要素の性質について確認してみてください。