4

<p>特にインライン要素で使用されることを知っています。しかし、インライン要素 like<span>をを使用してブロックレベル要素に変更し{ display:block }、それを a 内に含めるとどうなり<p>ますか?

すなわち。

<html>
<head>
<style>

  p {
    background: red;
    height: 100px;
    width: 100px;
    }

  p span {
    display: block;
    background: blue;
    height: 50px;
    width: 50px;
    }

</style>
</head>

<body>

<p>
  <span>I am a pizza</span>
</p>

</body>
</html>

それは言葉のあらゆる意味で間違っていますか？私はそれが一般的ではないことを知っています（つまり、ほとんどの人がなぜdivを使用しなかったのか疑問に思うでしょう）が、それは架空の状況です. それは検証テストに合格しますが、すべての一体/悪い習慣としてずさんですか? そのコードを読んだら嘲笑しますか?

4

2 に答える 2

11

HTMLでは要素は常にテキスト/インライン/フレーズ要素であり、要素の内容をそのような要素にspan制限する HTML 構文規則はHTML のみに関連します。そのため、CSS (レンダリング) の意味でa ブロック要素pを作成する可能性のある CSS 設定の影響を受けません。span

displayCSS では、要素がどのようなものであっても、プロパティに任意の定義済みの値を割り当てることができます。CSS は、HTML やその他のマークアップ言語の仕様で定義されている要素の意味を認識しません。

したがって、正式な異議はありません。

それが良いスタイルであるか、そうでなければ受け入れられるかは、より複雑です。仕様にはこれに関する記述はないようですが、基本的なレンダリング機能の要素を無駄に変更してはならないと言っても過言ではありません。たとえば、通常の状況では、使用するより論理的なアプローチがある場合は、CSS で使用spanしてから言うべきではありません。この原則の理由の 1 つは、非 CSS レンダリング状況で、またはスタイル シートのすべてまたは一部が適用されていない場合に、ドキュメントをより適切な形に保つためです。display: blockdiv

一方、テキスト段落があり、そのコンテンツの一部をブロックとしてレンダリングしたい場合はdisplay 、無駄に変更することはありません。div内部では使用できないpため、より自然なマークアップは使用できません。

この例は実際のものではないため、このアプローチをあなたのケースに適用してもよいかどうかを判断することはできません。

于 2013-09-21T13:30:03.067 に答える
-4

It's HTML5 valid and it's not that bad in certain situations e.g.

<p>
   This is some text <span class="highlight">I am a pizza</span> and this is some more text...
</p>

.highlight {
  background: yellow;
}
于 2013-09-21T08:18:28.943 に答える