【CSSが効かないときに要チェック】ブロックレベル要素とインライン要素の違い

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

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

ブロックレベル要素

ブロックレベル要素を一言で表すと、ボックスを積み上げていくように配置される要素です。

中の要素の大きさ（上記の例では文章の長さ）にかかわらず、親要素の幅いっぱいに広がります。

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

文章が多い時には、右端で自動的に折り返され、ブロック要素の高さが高くなっていきます。

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

ブロック要素はwidthやheightを指定することで幅や高さを自由に指定することができます。

See the Pen block by spiqa design (@spiqa_design) on CodePen.

ブロック要素は、幅が短い時でも横に並ぶのではなく縦に並びます。

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

ブロックレベル要素の例

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

ブロックレベル要素は、比較的扱いやすく種類も多いので、自然と使用しているのではないかと思います。

インライン要素とは

指定しているのにCSSが効かない！というとき、その要素がインライン要素であることがあります。

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、要素の幅に収まらなくなるまで横に並んで配置され、親要素の幅いっぱいになったら折り返す要素です。

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

インライン要素は、ブロックレベル要素と異なり、CSSで幅や高さを指定することができません。こちらの例でもwidthとheightを指定していますが、効いていませんね。

※img、inputなど高さを指定することができるインライン要素も一部あります。

See the Pen inline by spiqa design (@spiqa_design) on CodePen.

marginは左右にのみ指定できます。

See the Pen inline by spiqa design (@spiqa_design) on CodePen.

上の例では、上下左右にmargin:20pxを指定していますが、検証機能で確認してみると

このように左右のmarginのみが反映されていることがわかります。
（参考）検証機能とは

paddingは上下左右の指定ができます。

See the Pen inline by spiqa design (@spiqa_design) on CodePen.

しかし、上下のpaddingの指定を行う場合、そのインライン要素の上下に配置している要素と重なってしまうことがあります。
上記の例でもpタグの文章にspanの要素（黄色の部分）が重なってしまっています。

インライン要素の余白を調整する場合は、ブロック要素で囲んで他要素と意図せぬ重なりが起きないようにするなど行うようにしてください。

最後に、インライン要素内にブロックレベル要素を入れるのは文法上誤りです。

See the Pen inline by spiqa design (@spiqa_design) on CodePen.

インライン要素内にインライン要素を入れることはできます。
ただしいマークアップを心がけましょう！

インライン要素の例

a / br / button / img / input / span

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

文法上インライン要素を使用しているけれども、スタイルを調整するにあたって幅や高さを指定したいというときには、「ブロックレベル要素」または「インラインブロック要素」にすることで可能になります。

インライン要素をブロックレベル要素にする

インライン要素をブロックレベル要素にする場合は、以下のように指定するだけです。

.hoge{
  display:block;
}

とても簡単ですね！こちらの指定で、ブロックレベル要素と同じようにCSSを当てていくことができるようになります。

インライン要素をインラインブロック要素にする

インライン要素をインラインブロック要素にする場合は、以下のように指定します。

.hoge{
  display:inline-block;
}

インラインブロック要素は、「ブロックレベル要素」と「インライン要素」の両方の特徴を併せ持っています。

ブロックレベル要素の特徴	インライン要素の特徴
・幅や高さ、余白の指定ができる（`margin`も`padding`も指定可能）	・横に並んで配置される

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

上記の例では、spanにdisplay:inline-blockを指定しています。
横並びにはなっていますが、widthとheightの指定をすることができていますね！

要素に幅や高さを指定したいけれども、横並びになってほしいという場合など、とても便利なのでぜひ活用してみてください。

まとめ

今回、ブロックレベル要素は、ボックスを積み上げていくように縦に配置されるとご紹介しましたが、横並びを行いたい時に便利なflexという指定もあります。
こちらはブロックレベル要素にもインライン要素にも使用でき、子要素の並び順を指定できるなどとっても便利なものですので、気になる方はぜひ以下の記事も見てみてください！