ホームページ > ウェブフロントエンド > CSSチュートリアル > インライン要素とブロックレベル要素の違いは何ですか?

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

王林
リリース: 2020-05-07 09:15:28
転載
5087 人が閲覧しました

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

ブロックレベルの要素

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 サイトの他の関連記事を参照してください。

ソース:cnblogs.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート