ブロック要素とインライン要素の違いについての簡単な説明

HTML のタグ要素は、通常、ブロック要素、インライン要素 (インライン要素とも呼ばれる)、およびインライン ブロック要素の 3 つの異なるタイプに分類されます。では、ブロック要素とインライン要素の違いは何でしょうか?以下に紹介させていただきます。

##インライン要素

HTML、、 などのタグ と

は典型的なインライン要素です。もちろん、

display:inline; を設定することでブロック要素をインライン要素として表示することもできるため、ブロックレベルの要素はインライン要素の特性を持ちます。

p{
  display:inline;
}
...<p>我要变成内联元素！</p>

インライン要素の特徴:

1. 排他的な行ではなく、他の要素と

同じ行上にあります;

2. 要素

の高さ、幅、および上下のマージンは設定できません;

(追記: インライン要素の上マージンと下マージン、margin-top と margin-bottom属性は機能せず、margin-left 属性と margin-right 属性は機能します。padding 属性の top、bottom、left、right も機能しますが、

ただし、padding-top 属性はブラウザの上部にのみ到達できます。最大 、padding-top はブラウザの上部よりも高く、要素は下に移動しません。インライン要素に背景を追加する場合、パディングを使用できますが、背景色が周囲の要素を覆います。 )

3. 要素の幅は要素に含まれる画像、またはテキストの幅であり、設定できません;

*: ギャップは、インライン要素の間に「復帰」、「タブ」、「スペース」がある場合に表示されます。

解決策: スペース、改行、その他の記号を途中に入れずに、1 行で記述します。

ブロック要素

HTML

、

、

、

、< ul> と

はブロック要素です。

display:block; を設定することで、インライン要素をブロック要素として表示できます。

例: a{display:block;}

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

1. 各ブロック要素は新しいブロックで始まります。 line Start にすると、次の要素も新しい行で始まります (

1 行を占有します );

2. 要素の高さ、幅、行の高さ、上下の余白は次のとおりです。設定する;

3. 要素の幅が設定されていない場合、その親コン​​テナの 100% が占められます (親要素の幅と同じ);

インライン ブロック要素

インライン ブロック要素 (inline-block) は、

インライン要素とブロック要素の両方の特性を備えています、コード display:inline-block は、要素をインライン ブロック要素として設定します。 タグと タグは、このようなインライン ブロック タグです。

インライン ブロック要素の特徴:

1. 他の要素と同じ行にあります;

2. 高さ、幅、および要素の行の高さと上下の余白を設定できます。

推奨学習:

HTML ビデオ チュートリアル

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