CSSのブロックとインライン

1. block と inline という 2 つの概念は省略した用語であり、正確には、ブロック レベル要素 (ブロック レベル要素) とインライン要素 (インライン要素) となります。通常、ブロック要素は独立したブロックとして実現され、別の行に変更されます。インライン要素は前後に改行が発生せず、行がいっぱいになるまで一連のインライン要素が 1 行に表示されます。
2. 一般に、HTML 要素には独自のレイアウト レベル (ブロック要素またはインライン要素) があります。
   • 一般的なブロックレベルの要素には、DIV、FORM、TABLE、P、PRE、H1 ～ H6、DL、OL、UL などが含まれます。
   • 一般的なインライン要素には、SPAN、A、STRONG、EM、LABEL、INPUT、SELECT、TEXTAREA、IMG、BR などが含まれます。
3. ブロック要素にはブロック要素とインライン要素を含めることができますが、インライン要素にはインライン要素のみを含めることができます。これは一般的な記述であり、各特定の要素に含めることができる要素も特定であるため、この規則は個々の要素には適用されないことに注意してください。たとえば、P 要素にはインライン要素のみを含めることができますが、ブロック要素は含めることができません。
4. 一般に、要素のレイアウト レベルは、display:inline および display:block の設定を通じて変更できます。

ブロック、インライン、インリンクブロックの詳細な比較

• 表示ブロック

1. 1. ブロック要素は独自の行を占め、複数のブロック要素はそれぞれ新しい行を占めます。デフォルトでは、ブロック要素の幅がその親要素の幅に自動的に収まります。
   2. block 要素は幅と高さの属性を設定できます。ブロックレベル要素の幅が設定されていても、排他的な行を占有します。
   3. block 要素では、margin 属性とpadding 属性を設定できます。

• 表示:インライン

1. 1. インライン要素は行を占有しません。複数の隣接するインライン要素が同じ行に配置されます。1 行に収まりきらないまで、新しい行が追加されます。幅は要素の内容によって変わります。
   2. インライン要素に設定された幅および高さの属性は無効です。
   3. インライン要素の margin および padding 属性、水平方向の padding-left、padding-right、margin-left、および margin-right はすべてマージン効果を生成しますが、垂直方向の padding-top、padding-bottom、margin-top、margin -bottom はマージン効果を生成します。マージン効果は生じません。

• 表示:インラインブロック

1. 1. 簡単に言えば、オブジェクトはインライン オブジェクトとして表示されますが、オブジェクトのコンテンツはブロック オブジェクトとして表示されます。後続のインライン オブジェクトは同じ行に配置されます。たとえば、リンク (要素) に inline-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 属性の外観を持つようになります。