

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

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

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

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


CC BY-SA 4.0
2019-09-23T06:10:25.403
59214
2019-09-23T07:26:01.053
2019-09-23T06:16:01.463
32986
35936
question
html css html5
ブロック要素とインライン要素について質問があります


## 短い回答

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

**いいえ** 。

* * *

## 長い回答

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

> ## 21 Document Type
> Definition[[1]](https://www.w3.org/TR/html401/sgml/dtd.html)
[code]

>     <!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 -->
>  
[/code]

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

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

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

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

> ### 7.5.3 Block-level and inline
> elements[[2]](https://www.w3.org/TR/html401/struct/global.html#h-7.5.3)
>
> 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]](https://html.spec.whatwg.org/multipage/dom.html#kinds-of-
content)。また、特定のカテゴリに所属しない要素や、以下に示していないカテゴリに所属する要素も存在します。さらに、各カテゴリの規定の整形に関する記述は無くなり、各要素で期待される動作が
CSS
規則を用いて記述されるのみとなりました[[4]](https://html.spec.whatwg.org/multipage/rendering.html)。

> ### § 3.2.5.2 Kinds of
> content[[3]](https://html.spec.whatwg.org/multipage/dom.html#kinds-of-
> content)
>
> 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](https://www.w3.org/TR/html401/)
  2. [HTML Standard](https://html.spec.whatwg.org/multipage/dom.html)


CC BY-SA 4.0
2019-09-23T07:26:01.053
59215
2019-09-23T07:26:01.053
32986
59214
answer