htmlのインライン要素、インライン要素とは何ですか？ HTMLのインライン要素とインライン要素の特徴を紹介

HTMLのインライン要素とは何ですか? HTML ブロック内の要素は何ですか?この記事では、どれがインライン要素でどれがブロックレベル要素なのか、その特徴と違いについて紹介します。

HTMLインライン要素の特徴:

インライン要素は、インライン要素または埋め込み要素とも呼ばれます。インライン要素とその他の要素はすべて同じ行上にあり、高さ、行の高さ、パディング、マージンは変更できません。幅はテキストまたは画像の幅であり、変更できません。インライン要素にはテキストまたはその他のインライン要素のみを含めることができます。

前回の記事で紹介したa、img、brはインライン要素です。

ブロック要素の特徴:

①常に新しい行で開始します。

②高さ、行の高さ、マージン、パディングはすべて制御可能です。

③幅が指定されていない限り、デフォルトの幅はコンテナの 100% です。 set;

④ インライン要素やその他のブロック要素を収容できます。

インライン要素の特徴:

①と他の要素は同じ行にあります。

②高さ、行の高さ、外側の余白、内側の余白は変更できません。

③幅はテキストまたは画像です。 ;

④インライン要素にはテキストまたはその他のインライン要素のみを含めることができます。

インライン要素とブロック要素の説明:

CSS仕様によれば、Webページの各要素には要素のタイプを決定するために使用される表示属性があります。 div 要素などの値のデフォルトの表示属性値は「block」であり、「ブロックレベル」要素と呼ばれます。一方、span 要素のデフォルトの表示属性値は「inline」で、「インライン」と呼ばれます。 " 要素 。 div などのブロックレベルの要素は、特定の長方形のスペースを自動的に占めます。一方、「span」などのインライン要素は、高さ、幅、内側と外側の余白などの属性を設定することで調整できます。 "a" 要素には独自の独立したスペースがありません。そのため、インライン要素の高さ、幅、内マージン、外マージンなどの属性の設定は無効です。

インライン要素とブロック要素の違い:

(1) ブロックレベルの要素は排他的な行を占有し、その幅は親要素の幅を自動的に埋めますが、その幅は親要素の排他的な行を占有しません。隣接するインライン要素は同じ行内に配置され、1 行に収まりきらないまで行が分割され、その幅は要素の内容に応じて変化します

(2) 一般的に、ブロックレベルの要素は幅を設定できます。と高さの属性、およびインライン要素の幅と高さの設定は無効です

(注: ブロックレベルの要素の幅が設定されていても、排他的な行を占有します)

(3) ブロックレベルの要素はマージンを設定できます。インライン要素のpadding-left、padding-right、margin-left、margin-rightの水平方向はすべてマージン効果を生成しますが、padding-top、padding-bottom、margin-top、およびmargin-bottomはすべてマージン効果を生成します。垂直方向ではマージン効果は生じません。 （横方向は有効、縦方向は無効） 行要素とブロック要素とは 整列ブロック

dir - ディレクトリリスト

div - よく使われるブロックレベルが簡単で、CSSレイアウトのメインタグでもあります。 dl - 定義リスト

fieldset - フォームコントロールグループ form - インタラクティブフォーム

h1 - 大きなタイトル

h2 - サブタイトル

h3 - レベル 3 の見出し

h4 - レベル 4 の見出し

h5 - レベル 5見出し

h6 - レベル 6 見出し

hr - 水平分割線

menu - メニュー リスト

noframes - フレームはオプションのコンテンツ (このブロックのコンテンツは、フレームをサポートしていないブラウザーに表示されます)

noscript - オプションのスクリプト コンテンツ (このコンテンツはスクリプトをサポートしていないブラウザに表示されます)

ol - 並べ替えフォーム

p - 段落

pre - 書式付きテキスト

able - Table

ul - 未分類のリスト

inline要素(インライン要素)

a - アンカー

abbr - 略語

頭字語 - 最初の単語

b - 太字（非推奨）

big - 大きなフォント

br - 改行

cite - 引用 code - コンピュータコード（必須）ソースコードを引用する場合)

dfn - フィールドを定義します

em - 強調

font - フォント設定 (非推奨)

i - 斜体

img - 画像

input - 入力ボックス

kbd - キーボードテキストを定義

label - テーブルラベル

q - 短い引用符

s - 中取り消し線 (非推奨)

samp - サンプルコンピュータコードを定義

select - プロジェクト選択

small - 小さなフォントテキスト

span - 一般的に使用されるインラインコンテナ、テキスト内のブロックを定義します

strike - 取り消し線

強 - 太字強調

sub - 下付き文字

sup - 上付き文字

テキストエリア - 複数行のテキスト入力ボックス

tt - テレックステキスト

u - 下線

var - 変数を定義する

【関連する推奨事項】

HTML5 とは何ですか? HTML5 の特徴、メリット、デメリットは何ですか?

HTML をゼロから学習できる HTML の基本要素

以上がhtmlのインライン要素、インライン要素とは何ですか？ HTMLのインライン要素とインライン要素の特徴を紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。