HTML/CSSのブロックレベル要素とインライン要素について、すこし知識がついた話【プログラミング初心者】

JavaScript中級の学習をしながらも、HTMLやCSSについて新たな学びがたくさんあります。

今日は、HTML/CSSでたまに耳にするインライン要素について少し理解ができました。
セットでブロックレベル要素についても勉強したので、ここに記しておきます。

結論から言うと、CSSが上手く反映されない理由はこれらの要素のルールについて理解が足りないためだと思われます。

HTMLで使われるタグは、インライン要素とブロックレベル要素に分けられます。

インライン要素は文章の一部として使われる要素で、主に次のタグが該当します。
br、img、input、label、select、span、strong、textarea、u

インライン要素のルールはこちらです。

・改行が入らず要素同士で横に並ぶ
・文字データや他のインライン要素の配置が可能
・ブロックレベル要素を配置できない
・一部の要素をのぞき、高さと横幅の指定ができない
・余白の設定ができない

けっこう制限が多いイメージです。

ブロックレベル要素は、見出しや段落、表などを作る基本的な要素です。

代表的なものでは、次のタグが該当します。
div、dl、form、h1-h6、hr、ol、p、table、ul

ブロックレベル要素のルールは、こちらになります。

・改行が入り、要素同士で縦に並ぶ
・他のブロックレベル要素やインライン要素の配置が可能
・高さ、横幅を指定できる
・余白の指定が可能

今までこれらのルールを理解していないため、CSSが思うように反映されない現象によく悩まされてきました。
少しずつ知識が増えると、プログラミングにも1つ1つ意味が存在していることに気づかされます。

プログラミングは都度検索ができるため、基本的に覚える必要はありません。
しかし、このような知識があるのと無いのとでは、かなりスキルに差がつきます。

あまり成長が感じられないプログラミングですが、続けていると少しずつ理解出来ることが増えてきました。
これからも頑張って学習を継続していきます。