web-dev-qa-db-ja.com

別のブロック要素が含まれている場合、ブロック要素をCSSとインラインに変更するのは間違っていますか？

インライン要素内にブロック要素を配置するのは間違っていることは知っていますが、次はどうでしょうか？

この有効なマークアップを想像してみてください。

<div><p>This is a paragraph</p></div>

次に、このCSSを追加します。

div {
   display:inline;
}

これにより、インライン要素にブロック要素が含まれる状況が作成されます（divはインラインになり、pはデフォルトでブロックされます）

ページ要素はまだ有効ですか？

HTMLが有効かどうかをいつどのように判断しますか？CSSルールが適用される前または後ですか？

PDATE： HTML5では、リンクタグ内にブロックレベルの要素を配置することが完全に有効であることを学びました。例：

<a href="#">
      <h1>Heading</h1>
      <p>Paragraph.</p>
</a>

これは、HTMLの大きなブロックをリンクにしたい場合に実際に非常に役立ちます。

htmlcssw3cxhtml
43
Matthew James Taylor

CSS 2.1仕様 から：

インラインボックスにインフローブロックレベルボックスが含まれている場合、インラインボックス（および同じラインボックス内のそのインラインの祖先）は、ブロックレベルボックス（および連続しているか、によってのみ分離されているブロックレベルの兄弟）の周囲で分割されます。折りたたみ可能な空白および/または流出要素）、インラインボックスを2つのボックスに分割し（どちらかの側が空の場合でも）、ブロックレベルのボックスの両側に1つずつ。休憩前と休憩後のラインボックスは匿名のブロックボックスで囲まれ、ブロックレベルのボックスはそれらの匿名のボックスの兄弟になります。このようなインラインボックスが相対位置の影響を受ける場合、結果の変換は、インラインボックスに含まれるブロックレベルのボックスにも影響します。

このモデルは、次のルールの場合、次の例に適用されます。

p    { display: inline }
span { display: block }

このHTMLドキュメントで使用されました：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
  <TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
  <BODY>
    <P>
      This is anonymous text before the SPAN.
      <SPAN>This is the content of SPAN.</SPAN>
      This is anonymous text after the SPAN.
    </P>
  </BODY>

P要素には、匿名テキストのチャンク（C1）、ブロックレベルの要素、匿名テキストの別のチャンク（C2）が含まれます。結果のボックスは、BODYを表すブロックボックスになり、C1の周りの匿名ブロックボックス、SPANブロックボックス、およびC2の周りの別の匿名ブロックボックスが含まれます。

匿名ボックスのプロパティは、囲んでいる非匿名ボックスから継承されます（たとえば、「匿名ブロックボックス」という見出しのすぐ下の例では、DIV用です）。継承されていないプロパティには初期値があります。たとえば、匿名ボックスのフォントはDIVから継承されますが、余白は0になります。

匿名ブロックボックスを生成する要素に設定されたプロパティは、その要素のボックスとコンテンツに引き続き適用されます。たとえば、上記の例でP要素に境界線が設定されている場合、境界線はC1（線の端で開く）とC2（線の始点で開く）の周りに描画されます。

一部のユーザーエージェントは、他の方法でブロックを含むインラインに境界線を実装しています。たとえば、そのようなネストされたブロックを「匿名のラインボックス」内にラップし、そのようなボックスの周りにインライン境界線を描画します。 CSS1とCSS2はこの動作を定義していなかったため、CSS1のみとCSS2のみのユーザーエージェントはこの代替モデルを実装しても、CSS2.1のこの部分への準拠を主張できます。これは、この仕様がリリースされた後に開発されたUAには適用されません。

それをあなたがすることで作ってください。動作はCSSで指定されていることは明らかですが、すべてのケースをカバーするのか、今日のブラウザー全体で一貫して実装されるのかは不明です。

26
Alohci

有効かどうかに関係なく、要素の構造が間違っています。ブロック要素をインライン要素内に配置しない理由は、ブラウザーが要素を簡単に予測可能な方法でレンダリングできるようにするためです。

HTMLまたはCSSのいずれのルールにも違反していなくても、意図したとおりにレンダリングできない要素が作成されます。ブラウザは、HTMLコードが無効であるかのように要素を処理する必要があります。

15
Guffa

HTMLとCSSはどちらも引き続き有効です。理想的には、このようなことをする必要はありませんが、CSSのその特定のビットは、無効になる条件付きスタイルシートやハックに頼ることなく、Internet Explorerのダブルマージンバグを取得するための便利な（構文的には有効ですが、意味的には有効ではありません）方法です。あなたのCSS。 （X）HTMLはCSSよりも意味的な価値があるため、CSSが意味的に有効であるかどうかはそれほど重要ではありません。私の考えでは、コードを無効にすることなくブラウザの煩わしい問題を解決するので、それは許容できます。

5
VirtuosiMedia

HTMLはCSSとは独立して検証されるため、ページは引き続き有効です。 CSS仕様にもそれについては何も書かれていないと私はかなり確信していますが、それについて私を引用しないでください。ただし、このような手法の使用には細心の注意を払っています。一部のブラウザでは意図したとおりにレンダリングされる可能性がありますが、すべてをテストする必要があります。多くの保証が行われているとは思えません。

1
Samir Talwar

ページ要素はまだ有効ですか？

HTMLの意味で「有効」です。 HTMLはCSSについて何も知りません。

ただし、ブラウザで取得するレンダリングは、CSS仕様では「未定義」であるため、まったく何にでも見える可能性があります。ある特定のブラウザ（そのブラウザがこのケースをどのようにレンダリングするかを知っている）を対象としたCSSハックにそのようなルールを含めることはできますが、一般にブラウザに提供すべきではありません。

1
bobince

これがルールを検証するかどうかは頭からわかりませんが、 W3C HTML Validator と W3C CSS Validator を使用して決定することをお勧めします。これがお役に立てば幸いです。

0
Adam Alexander