全体の概念

ブロックとインラインの 2 つの概念は略語であり、完全かつ正確な用語はブロックレベル要素 (ブロックレベル要素) とインライン要素 (インライン要素) です。通常、ブロック要素は独立したブロックとして実現され、別の行に変更されます。インライン要素は前後で改行されず、行がいっぱいになるまで一連のインライン要素が 1 行に表示されます。
一般に、HTML 要素には独自のレイアウトレベル (ブロック要素またはインライン要素) があります。

一般的なブロックレベル要素には、 DIV、FORM、TABLE、P、PRE、H1~H6、DL 、OL が含まれます。、ＵＬら。
一般的なインライン要素には、SPAN、A、STRONG、EM、LABEL、INPUT、SELECT、TEXTAREA、IMG、BR などが含まれます。

block 要素には block 要素と inline 要素を含めることができますが、inline 要素には inline 要素のみを含めることができます。これは一般的な記述であり、各特定の要素に含めることができる要素も特定であるため、この規則は個々の要素には適用されないことに注意してください。たとえば、P 要素にはインライン要素のみを含めることができますが、ブロック要素は含めることができません。

一般的に、display:inline と display:block の設定を通じて要素のレイアウトレベルを変更できます。

block、inline、inlinke-blockの詳細の比較

追加説明

通常、要素のレイアウトレベルを調整するには、display:block、display:inline、またはdisplay:inline-blockを使用します。実際、表示パラメータはこれら 3 つよりもはるかに多くあり、より一般的に使用されるだけです。
IE (IE の下位バージョン) は元々 inline-block をサポートしていないため、IE のインライン要素には display:inline-block を使用します。理論上、IE は認識しませんが、display:inline-block を使用すると、レイアウトは IE でトリガーされるため、インライン要素は display:inline-block 属性のようになります。

display:inline-block

display:inline

display:block

は単にオブジェクトをインラインオブジェクトでレンダリングすることを意味します。ただし、オブジェクトの内容は提示されますブロックオブジェクトとして。後続のインラインオブジェクトは同じ行に配置されます。たとえば、リンク (要素) に inline-block 属性値を与えると、リンクがブロックの幅と高さの特性と、インラインのピア特性の両方を持つようになります。
インライン要素は単独で行を占有することはなく、1 行に収まらないまでは新しい行が追加されます。要素。
インライン要素の幅と高さの属性の設定は無効です。
インライン要素の margin 属性と padding 属性、水平方向の padding-left、padding-right、margin-left、および margin-right はすべてマージン効果を生成しますが、垂直方向の padding-top、padding-bottom、margin -top はマージン効果を生成します。、 margin-bottom はマージン効果を生成しません。