DIVをそのまま使用し、ディスプレイ付きSPANの違い：ブロック

<div/>は<span style="display:block" />と異なりますか？DIVをそのまま使用し、ディスプレイ付きSPANの違い：ブロック

これは同じようにうまく表示されます。 2つの意味の違いは？

2009-07-17 Alin Vasile

をレンダリングされます

はい、彼らは異なっています。

あなたはdisplay: blockとスパンのスタイルにもかかわらず、あなたはまだそれ内部のブロックレベル要素を置くことはできません。

<div><p>correct</p></div> 
<span style="display: block;"><p>wrong</p></span>

（X）HTMLはまだ（X）HTML DTD（いずれか1に従うことがありますあなたはCSSをどのように変えるかにかかわらず）。

<a href='example.com'> 
    <span class='title' style='display:block;'>The title of the image is also a link</span> 
    <img src="example.com/someimage.jpg"/> 
</a>

あなたのスパンブロックレベル要素にすることができますし、とき一緒に強調表示する画像やスパンを可能にする：

出典

2009-07-17 08:52:40 Greg

必要とされる文字の数が若干少なくなるだけでなく、 'display：inline'と' div'を使って 'span'を使う利点はありますか？ – JAB

OMG良い答え。 – VoidKing

はい。彼らは異なるものを含むことができ、異なる場所で許可されます。彼らはまた、（例えば、いくつかの電子メールシステムで）CSSが利用できない環境では異なる

出典

2009-07-17 08:52:28 Quentin

は、ここでは（少なくとも、有効なコードのための）本当の違いを例です終わった。

divは、aタグ内でネストされていません。

出典

2009-07-17 08:56:58

スパン_display_をCSSをサポートするデバイス上のブロックとして作成しますが、ブロックレベルの要素にしません。インライン要素のままです。この場合、それは実際にあなたが望むものです。ブロッキネスは純粋に視覚効果のためです:-) – NickFitz

うん。そして、それはそれの美しさです。スタイルシートがなければそれほど素晴らしいとは言えませんが。 –

あなたの例はHTMLの妥当性を気にするかどうかに関わらず、実際のブラウザーの違いを提供するので、実際に妥当性を議論するのは残念です。 – Alohci

<div>は、個別のコンテンツブロックを定義する以上の独自のセマンティクスを持たないブロックレベルの要素です。 <スパン>は、インライン要素であり、インライン要素の個別セグメントを定義する以上の固有のセマンティクスを持たないインライン要素です。

CSSを使用してスパン表示をブロックにすることはできますが、編集する理由はまったくありません.Gabrielが示すように、純粋な視覚効果以外は編集しません。私が意味することは、スパンを文書構造の観点からブロックレベルの意味を持つように強制しようとするためにCSSを使用すべきではないということです。さらに、あなたがそうした場合、あなたのコンテンツは、目の不自由なユーザーや検索エンジンのように、CSSのないユーザーには無意味に見えるでしょう。

ブロックの場合は、divを使用します。インラインコンテンツの一部である場合は、スパンを使用します。覚えておいてください、CSSはプレゼンテーションだけです。あなたのマークアップは、あなたのコンテンツを使用可能にするために論理的な方法で構造化する必要があります。

詳細はhttp://www.w3.org/TR/html401/struct/global.html#edef-DIVを参照してください。

出典

2009-07-17 08:57:51 NickFitz

「絶対にそうする理由はない」という陳述は、まったく真実ではない。 –

@Gabriel：私はあなたの例を参考にして私のコメントを編集しました。 – NickFitz

DIVをそのまま使用し、ディスプレイ付きSPANの違い：ブロック

答えて

関連する問題