インライン要素、ブロックレベル要素、空要素の違いの詳細な説明

インライン要素: a、b、span、img、input、strong、select、label、em、button、textarea

ブロックレベル要素: p、ul、li、dl、dt、dd、p、h1-h6、 blockquote

空の要素: br、meta、hr、link、input、img

ブロックレベルの要素の特徴:

1. 常に新しい行で開始し、行全体を占有します
2。 width 親要素の幅を自動的に埋めます
3. 幅は、コンテンツに関係なく、常にブラウザの幅と同じになります
4. 表示属性はブロックです

ブロックレベル要素の垂直位相 隣接するマージンがマージされます。

インライン要素の特徴:
1. 他の要素と同じ行にある
2. 高さ、行の高さ、余白とパディング部分は変更可能です
3. 幅はコンテンツにのみ関係します
4.要素 テキストまたはその他のインライン要素のみを収容できます
5. 表示属性はインラインです

水平方向の Padding-left、padding-right、margin-left、margin-right はすべてマージン効果を生成します

が、padding-top では垂直方向、padding-bottom、margin-top、margin-bottom はマージン効果を生成しません。
幅と高さは設定できません。幅はコンテンツに応じて増加し、高さはフォントサイズに応じて変わります。ただし、外枠は上下には影響せず、左右にのみ影響します。 。

空要素の特徴:

コンテンツのないHTMLコンテンツは空要素と呼ばれます。空の要素は開始タグで閉じられます。

は終了タグのない空の要素です (
タグ定義はラップされます)。
XHTML、XML、および HTML の将来のバージョンでは、すべての要素を閉じる必要があります。

などの開始タグにスラッシュを追加することは、空の要素を閉じる正しい方法であり、HTML、XHTML、および XML で受け入れられます。

はすべてのブラウザで有効ですが、実際には
を使用すると長期保証になります。

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