htmlインライン要素とhtmlブロックレベル要素の概要と相違点

ブロックレベル要素(ブロック)の特徴
-別行で開始することで示されるように、常に別行を占め、後続の要素も別行で表示しなければならない。
-幅、高さ、パディング、マージンを制御することができる。
インライン要素の特徴
-および同じ行にある隣接するインライン要素。
-内側のマージンの幅、高さ、上/下（padding-top/padding-bottom）、外側のマージンの上/下（margin-top/margin-bottom）は変更不可、つまり中のテキストや画像の大きさは変更不可です。
主なブロックレベル要素は :

コピーコード

コードは以下の通りです。

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul

主なインライン要素は

コピーコード

コードは以下の通りです。

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,
textarea , tt , u , var

可変要素（文脈上の関係からブロック要素かインライン要素かを判断します。） : は

コピーコード

コードは以下の通りです。

applet ,button ,del ,iframe , ins ,map ,object , script

CSSにおけるブロックレベル、インライン要素の適用について
CSSを使えば、上表のようなHTMLタグの分類の制約を受けず、タグや要素ごとに必要な属性を自由に適用することができます。
主に使用するCSSスタイルは以下の3つです。
-display:block -- ブロックレベル要素として表示する。
-display:inline -- インライン要素として表示されます。
-dipslay:inline-block -- インラインブロック要素として表示し、ピアディスプレイとして振る舞い、幅、高さ、内側と外側のマージンなどのプロパティを変更することができます。
よく、<ul> 要素に display:inline-block スタイルを追加して、縦長のリストを横長に表示できるようにします。
オフトピック ブロックレベル要素とインライン要素の違いについて、いろいろと記事を探しているのですが、どうも皆の理解が違っているようです。 多くの問題点を発見
1. インライン要素の margin-left / margin-right と padding-left / padding-rigtht は制御可能なので、この4つの属性でインライン要素の幅を制御することができます。
2. インライン要素の中にブロックレベル要素のラベルを入れることもでき、内部のブロックレベル要素のラベルが外部のインラインラベルに対応するので、ブロック要素を入れることでインライン要素の高さをコントロールできる（ウェブではインライン要素はテキストと他のインライン要素しか入れられないと紹介されている）。
例