【CSS】display:block(ブロック) と display:inlne-block(インラインブロック )の違いとは?

displayプロパティにおいて「block」と「inline」については大きな違いがあるから区分けがしやすかった。

それに対して、display:blockとdisplay:inline-blockについては

  • 「block とinline-blockは何が違うの??」

という疑問があったので、この機会に整理してみた。

スポンサーリンク

display : blockとdisplay : inline-blockの違いとは!?

display : inline-blockは display:block に非常によく似ているのだが、少しだけ display:inline のような性質も持つ。

それがdisplay:blockとの違いになっているので、どう違うのかを整理していきたい。

①前後に改行が入るかどうか?

先程軽く触れたが、display:blockは

「前後に改行が入るため、要素が縦に積み重なっていく」

という特徴がある。

display:blockの要素は下図のように前後に改行が入るので、横並びにはならない。

displayblock

それに対して display:inline-block は要素の前後に改行が入らないので

「要素は横に並んでいく!」

という特徴がある。

display inline-block

これが display:block と display:inline-block の大きな違いだ。

②要素の幅が横いっぱいに広がるかどうか?

要素の幅についても、display:block と display:inline-block  とでは違いがある。

display:block では要素の幅に関係なく、横いっぱいに広がる。

display block要素幅

一方で display:inline-block は、display:inline と同様に「要素の幅に応じた横幅」となる。

display inline-block 要素幅

このように

  1. 前後に改行が入るかどうか?
  2. 要素の幅が横いっぱいに広がるかどうか?

の2つがdisplay:blockとdisplay:inline-blockの大きな違いだ。

display:blockとdisplay:inline-blockの共通点

違いは整理出来たので、共通点も確認しておく

  1. widthとheightの指定が可能(幅と高さの指定)
  2. 上下左右のmargin(外側の余白)の指定が可能

上記の2つだ。

このように display:inline-block は display:inline と違って、widthやheightの指定が可能なので、要素は横並びになるにもかかわらず、幅や高さを自在に変えることが出来る。

それに「要素と要素の間の余白(margin)」も自由に調整できることもポイントだ。

関連記事はこちら!

【CSS】display:blockとdisplay:inlineの違いって何??

【CSS】外側の余白を作る margin を上下左右まとめて指定する方法をわかりやすく解説!

スポンサーリンク
おすすめの記事