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

HTMLのインライン要素とブロック要素について、

なんとなくの感覚でスタイルをあてていることが多いので、復習。

インライン要素

• 横並びに表示され、縦幅・横幅を指定できない。
• cssでdisplay:block;をあてるとブロック要素の性質を与えれて縦並びにできる。
• display:inline-block;はインライン要素とブロック要素の両方の性質を併せ持ち、横並びで表示されるが、高さが指定できる。

ブロック要素

• 縦並びに表示される。
• cssでdisplay:inline;をあてるとインライン要素の性質を与えれて横並びにできる。

インライン要素とブロック要素のざっくりとした見分け方は、
横に並べばインライン要素。
縦に並べばブロック要素。

また、スタイルがあたる優先度はタグ→クラス→id。
ただし、親要素、子要素なども含めると変わってくる。。。

インライン要素か、ブロック要素か、理解した上でコーディングするのが大事だと思った。

例えば、

「spanタグは縦並びにならないのか。」

と、

「spanタグはインライン要素だから縦並びにならないのか。」

では、文章にすると少しの違いだけどコーディングしていく上で、大きく変わってくると思う。

本当に基礎基本なことで今更なことですが、しっかりとこういったことも自分の理解を深めるために書き残していこうと思いました。