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

ブロックレベルの要素

1. 常に新しい行から開始します

2. 高さ、行の高さ、余白内側のマージンを制御できます

3. デフォルトの幅はブラウザの 100% です

4. インライン要素とその他のブロック要素を収容できます

インライン要素

1. 隣接する要素と同じ行上にあります

2. 高さと幅は無効ですが、横方向のパディングとマージンは設定できます、垂直方向は無効です

3. デフォルトの幅は、それ自体のコンテンツの幅です

4. インライン要素には、テキストまたはその他のインライン要素 (a を除く) のみを収容できます

(ビデオチュートリアルの推奨: css ビデオチュートリアル)

注:

1. 段落を形成できるのはテキストのみであるため、ブロックレベル要素を p に配置することはできません。同様に、h1 ～ h6、dt などのタグがありますが、これらはすべてテキスト ブロック レベルのタグであり、他のブロック レベルの要素をその中に配置することはできません

2リンクの中にリンクを配置することはできません

#ブロックレベル要素インライン要素との違い

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

1. 常に新しい行から開始します

2. 高さ、行の高さ、マージン、およびパディングはすべて制御できます

3. デフォルトの幅はブラウザの 100% です

4. インライン要素とその他のブロック要素を収容可能

インライン要素の特徴:

1. 隣接するインライン要素と同一行上にある

2. 高さと幅は無効ですが、水平方向のパディングとマージンは設定できます。垂直方向は無効です。

3. デフォルトの幅はコンテンツ自体の幅です

4. インライン要素には、テキストまたはその他のインライン要素 (a を除く) のみを含めることができます。

インライン ブロック タグ

インラインには、いくつかの特別なタグがあります。要素 -、、 を制御できます。幅、高さ、配置プロパティを設定します。ソースによっては、これらをインライン ブロック要素と呼ぶ場合があります。

機能:

1. 隣接するインライン要素と同じ行 (行内) にありますが、それらの間には空白のギャップがあります。

2、デフォルトの幅はコンテンツ自体の幅です

3. 高さ、行の高さ、外側の余白と内側の余白はすべて制御できます

ラベル表示モード変換表示

ブロックをインラインに変換:display:inline;

インラインをブロックに変換:display:block;

ブロックとインライン要素をインライン ブロックに変換:display:inline-block;

推奨チュートリアル:

css クイック スタート

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