HTML インライン要素とブロックレベル要素、およびそれらの相互変換についての理解

ブロックレベル要素: div、p (段落)、form (フォーム)、ul (順序なしリスト)、li (リスト項目)、 ol(順序付きリスト)、dl(定義リスト)、hr(水平分割線)、menu(メニューリスト)、table(テーブル)...

特徴: 1. ブロックレベル要素は排他的な行を占有し、その幅は親要素の幅を自動的に埋めます。

2. 幅と高さの属性を設定できます。 (幅を設定してもfloat属性を使用する等の特別な事情がない限り1行になります)

3. マージン（外側のマージン）とパディング（内側のマージン）を設定できます。

インライン要素: span、strong、em、br、img、input、label、select、testarea...

(インライン要素、インライン要素、埋め込み要素、およびインライン要素はすべて「インライン要素」を指します)

特徴: 1. インライン要素は 1 行を占有しません。1 行に収まらないまでは折り返されません。要素の内容が変更されます (幅は内容によって引き伸ばされます)。

2. width および height 属性の設定は無効です。

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

ただし、垂直方向のpadding-top、padding-bottom、margin-top、margin-bottomは何の効果もありません。

可変要素: 要素がブロックレベル要素であるかインライン要素であるかをコンテキストに基づいて判断する必要があります。コンテキストがそのカテゴリを決定すると、ブロックレベル要素またはインライン要素のルールに従います。

CSS: css は、HTML のデフォルトのレイアウト モードを変更し、ブロックレベルの要素を必要な場所に配置できます。

ブロックレベル要素とインライン要素 の基本的な違いは、ブロック要素は通常新しい行で始まり、CSS コントロールが追加された場合、この属性の違いは違いにはならないということです。

属性 display:block を インライン要素 に追加して、インライン要素を毎回更新できるようにします行の開始属性。

属性 display:inline を ブロックレベル要素 に追加します。新しい属性 Line start 属性がありません。

display:inline-block 属性を インライン要素 に追加します。これはまだインライン要素です。ただし、幅や高さの属性などを設定することもできます。

(この記事は学習と交換のみを目的としています。異なる意見がある場合は、貴重なコメントを残してください~)