3

お世話になります。
CSSとHTMLでブロック要素インライン要素の違いを学習しています。

https://60pablog.com/html-block-inline/#CSS
http://www.htmq.com/htmlkihon/005.shtml

上二つのサイトを参考にしていますが、ブロック要素インライン要素をCSSで変えられるとかかれていました。
CSSでブロック要素からインライン要素へ変えるとwidthとheightが指定できなくなりますが、インライン要素をブロック要素にするとインライン要素にもブロック要素が入りますか?
例えば二目のサイトでのspanをブロック要素にすればpタグやulタグを入れられるのかということです。

わかる方がいらっしゃいましたら、どうぞよろしくお願いいたします。

1 件の回答 1

5

短い回答

インライン要素をブロック要素にするとインライン要素にもブロック要素が入りますか?

いいえ


長い回答

HTML4 では、要素の主要な分類 (カテゴリ) として、ブロックレベルとインラインがあります。基本的には、HTML4 Strict において body 要素の子要素として許可される要素のほとんどがブロックレベルに、それ以外がインラインに分類されています。ここで、一部の要素はどちらのカテゴリにも所属していません。

21 Document Type Definition[1]

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; |
%formctrl;">

<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
      BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->

また、どちらのカテゴリかによって、コンテンツモデル、整形、書字方向の継承の仕方が異なります (書字方向の継承に関する説明は省略)。

  • コンテンツモデル
    コンテンツモデルとは、どの要素を子要素として取り得るかを示すものです。ブロックレベル要素では、インライン要素やブロックレベル要素を子要素として取り得ます。インライン要素では、インライン要素を子要素として取り得ます。

  • 整形
    HTML4 では、ブロックレベルかインラインのどちらのカテゴリに属するかによって、異なる整形がされます。これは簡単にいえば、ブロックレベルかインラインかによって、その要素の表示形式が異なるということです。

    通常の整形では、ブロックレベル要素は新しい行を開始しますが、インライン要素は新しい行を開始しません。各要素にはこの整形の規則に従って、ユーザーエージェントスタイルシートによる装飾が行われます。よって、「ブロックレベル(HTML)のカテゴリに所属する要素は、デフォルトでブロックレベル(CSS)の要素になる」ということになります。もし、ブロックレベル(HTML)のカテゴリに所属する要素をインラインレベル(CSS)の要素にしたとしても、コンテンツモデルには一切影響しません

7.5.3 Block-level and inline elements[2]

Certain HTML elements that may appear in BODY are said to be "block-level" while others are "inline" (also known as "text level"). The distinction is founded on several notions:

Content model
Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
Formatting
By default, block-level elements are formatted differently than inline elements. Generally, block-level elements begin on new lines, inline elements do not. For information about white space, line breaks, and block formatting, please consult the section on text.
Directionality
For technical reasons involving the [UNICODE] bidirectional text algorithm, block-level and inline elements differ in how they inherit directionality information. For details, see the section on inheritance of text direction.

HTML5 以降は、カテゴリからブロックレベル、インラインが削除され、各要素はさらに細分化されたカテゴリの 0 個以上に所属します[3]。また、特定のカテゴリに所属しない要素や、以下に示していないカテゴリに所属する要素も存在します。さらに、各カテゴリの規定の整形に関する記述は無くなり、各要素で期待される動作が CSS 規則を用いて記述されるのみとなりました[4]

§ 3.2.5.2 Kinds of content[3]

Each element in HTML falls into zero or more categories that group elements with similar characteristics together. The following broad categories are used in this specification:

  • Metadata content
  • Flow content
  • Sectioning content
  • Heading content
  • Phrasing content
  • Embedded content
  • Interactive content

参考:

  1. HTML 4.01 Specification
  2. HTML Standard

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。