Q&A
（質問文は編集できます）出典URLを質問文に追加してください。
置換インライン要素とインラインブロック要素って同じですか？初期値でインラインブロック要素の物はないと書いているサイトがありました。しかし別のサイトでは、『置換インライン要素（インラインブロック要素）例えばimg要素』などと紹介しており『リンク内容』、こんがらがっています。
あと、img要素にdisplay: block;を指定して、border: solid;を指定すると、borderの横幅が親要素いっぱいまで広がっていないのですが、これはimg要素が置換インライン要素であることと関係ありますか？
＞border: sorid;
そういう指定はありません。
https://developer.mozilla.org/ja/docs/Web/CSS/border-style
border: solid; の間違いです
kei344さん
初期値でインラインブロック要素の物はないと書いてあったというのは僕の勘違いだったかもしれません。該当するサイトが見つかりませんでした。すみません。後半の質問にお答えいただけると嬉しいです。
m.ts10806
borderの指定についてですが、solidを指定したと言うことに特に意味はありません。とりあえずborderを指定したときに上記のようなことになったと言うだけです。
回答1件
0
ベストアンサー
置換インライン要素とインラインブロック要素って同じですか？
似ている部分（たとえば、内在サイズを持つ、上下マージンを設定できる）はありますが、CSS3において明確に違うと言えます。
- 定義が全く別にされています。
14.4 Replaced elements | HTML Standard
replaced element | CSS Display Module Level 3
inline-block | CSS Display Module Level 3
-
inline-blockは子要素を持ちますが、置換要素の多くは空要素で、子要素を持つものもそのコンテンツに置換されます。そのため、内部に別のコンテンツを持つことができず、置換要素の内容物はCSSでコントロールできません。つまり、video source{ display: none; }のようなルールは適用できません。 -
inline-blockは、CSS3においてinline flow-rootと同義なので、ブロック整形コンテキストを持ち、ブロックコンテナとなります。
置換要素がinline-blockと同じであるならば、置換要素もブロック整形コンテキストを持つブロックコンテナになることになりますが、置換要素は前述の通り内容をCSSでコントロールできません。
これは私見ですが、そもそも整形コンテキストにあまり意味はなく、<display-inside>について論ずる必要が不明だと思います。
<display-inside>について論ずる必要がないのであれば、inline-blockでもinlineでも、あるいはinline-tableであっても差異は出ないはずですから、「置換インライン要素とインラインブロック要素が同じ」という主張は、「置換インライン要素とインライン要素が同じ」という主張と特段の違いがありませんから、あまり意味がないと感じます。
img要素にdisplay: block;を指定して、border: solid;を指定すると、borderの横幅が親要素いっぱいまで広がっていないのですが、これはimg要素が置換インライン要素であることと関係ありますか？
display: block;を指定しているので「置換ブロック要素」の間違いだと思いますが、
The used value of 'width' is determined as for inline replaced elements.
10.3.4 Block-level, replaced elements in normal flow | Visual formatting model details
If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic width, then that intrinsic width is the used value of 'width'.
10.3.2 Inline, replaced elements | Visual formatting model details
となっており、置換要素はインラインでもブロックでも、heightとwidthの両方がautoである時は、内在サイズに従うことになっています。
（もちろん、フレックス整形コンテキスト下などにおいては、別の制約を受けます。ブロック整形コンテキストとインライン整形コンテキストにおいては、ということです）
余談ですが。
初期値でインラインブロック要素の物はない
ある意味で正しいです。
なぜならば、全ての要素の初期値はinlineと決まっているからです。
初期値 inline
display - CSS: カスケーディングスタイルシート | MDN
では、なぜdivがblockとして表示されるかというと、デフォルトCSSによるものです。
Default style sheet for HTML 4
リセットしてやればinlineになります。
サンプル
なので、ある意味では正しいのですが、「初期値」がデフォルトCSSのことならば、input, select { display: inline-block }というルールがあるので、間違っています。
投稿2020/05/27 02:43
編集2020/05/27 05:13
総合スコア36151
あなたの回答
tips
プレビュー
