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

ページデザインを行っていく上で、インライン要素とブロックレベル要素を全く意識しないで（知らないまま）、CSSの設定を行っている方がいます。
当然上手くいく訳がありません。

上手くいかないから、いろんなCSS（プロパティ）を入れ、なんとか見た目を整えようとしています。
そうなると、何処に、何を設定したから上手くいったのか、そんな事も解らないまま行き当たりばったりで、取って付けたようなCSS、
無駄も多いし、可読性が落ちます。

こういったソースコードは、どんどん複雑になっていき、必要の無い設定を入れてる為、それがアダとなり、コントロールが効かなくなってきます。
結果として、デザイン調整が難しくなり、メンテナンスができなくなっていきます。

そして、そのようなエンジニアは、いずれ自分の仕事を継続する事ができなくなり、業界を辞めたり、その仕事から逃げるようになります。

どんな技術にも言える事ですが、いかに無駄を省くか、必要の無いものは徹底的に排除し、必要なものだけにする。
長年エンジニアを続けてきて思う事は、結局「シンプルイズベスト」です。

さて、話が大きく脱線したので本題ですね。
このインライン要素なのか、ブロックレベル要素なのか、には覚え方のコツのようなものがあります。

HTMLの要素は、インライン要素とブロックレベル要素のどちらかに属します。
もちろん最終的にはすべての要素について「どちらに属するか」は覚える必要もあり、慣れてくると感覚として解っては来るのですが、初心者の間はそれ以外にも覚える事が多く、すべては覚えきれません。
そこで最初の取っ掛かりとして、次のように覚えるといいでしょう。

まず、よく使われる次のようなインライン要素を最低限覚えましょう。

a要素

リンク文字、リンク画像を作成する時に使用する

img要素

画像を表示する時に使用する

span要素

文字単位にCSSを適用する時に使用する

input要素

フォーム要素の一部として入力BOX（テキストボックス）を作成する時に使用する

small要素

著作権表記を作成する時に使用する

上記以外の要素が出てきたら、ブロックレベル要素と思ってほぼ間違いないです。
これまでに習った、body、header、footer、h1、p、ul、li、div．．などなど、これらすべてブロックレベル要素です。

もちろん例外はありますし、冒頭で述べたように最終的にはすべてちゃんと把握する必要がありますが、不慣れな間はまず、上記5つのインライン要素を覚え、それ以外はブロックレベル要素、と覚える事でミスが軽減できます。