インライン要素とブロックレベル要素とは何ですか?

インライン要素には、div、p、h1-h6、ul、ol、li、table、form などが含まれ、ブロックレベルの要素には、span、a、img、strong、em、input、label などが含まれます。 。 2 つの要素の特徴: 1. インライン要素は排他的な行を占有し、親コンテナの幅を自動的に埋めます。幅、高さ、内外のマージンなどの属性を設定でき、他のブロック レベルの要素や要素を含めることができます。インライン要素; 2. インライン要素は排他的な行を占有し、幅と高さは内容によって決まり、内余白と外余白は要素自体の配置にのみ影響します。

#この記事の動作環境: Windows 10 システム、Dell G3 コンピューター。

インライン要素とブロックレベル要素は HTML の 2 つの要素タイプで、ページ上での表示と動作が異なります。

ブロックレベル要素:

一般的なブロックレベル要素には、div、p、h1-h6、ul、ol、li、table、form などが含まれます。

ブロックレベル要素は 1 行を占有し、幅が設定されていない場合でも、親コンテナの幅を自動的に埋めます。

ブロックレベルの要素では、幅、高さ、内側と外側の余白などの属性を設定できます。

ブロックレベル要素には、他のブロックレベル要素とインライン要素を含めることができます。

インライン要素:

一般的なインライン要素には、span、a、img、strong、em、input、label などが含まれます。

インライン要素は 1 行を占有せず、コンテンツのサイズに応じて同じ行内に自動的に配置されます。

インライン要素の幅と高さはコンテンツによって決まり、幅と高さの属性を直接設定することはできません。

インライン要素の内側と外側のマージンは、要素自体の配置にのみ影響し、他の要素の位置は変更しません。

インライン要素にはブロック レベルの要素を含めることはできません。含めることができるのは、他のインライン要素またはテキスト コンテンツのみです。

HTML5 の一部の要素は、コンテキストに応じてブロックレベル要素またはインライン要素の特性を示す可能性があることに注意してください。たとえば、a タグはデフォルトではインライン要素ですが、display: block; 属性を a タグに設定すると、ブロックレベルの要素になります。

概要:

インライン要素とブロックレベル要素では、ページ レイアウトとスタイル設定のパフォーマンスが異なります。ブロックレベル要素は専用行を占有し、幅、高さ、内外マージンを設定でき、他のブロックレベル要素やインライン要素を含めることができ、インライン要素は内容に応じて同一行に配置されます。サイズ、幅と高さは設定できません。内側と外側の余白は要素自体にのみ影響します。配置には他のインライン要素またはテキスト コンテンツのみを含めることができます。

以上がインライン要素とブロックレベル要素とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。