2011-01-23 2 views
14

DIVをいつ使用し、何かをラップする場合はSPANを選択するにはどうすればよいですか?DIVを使用するタイミングとSPANを選択すると、何かをラッピングできますか?

多くの場合、PSD 2 HTMLを作成するときに、効果を得るために何かの条件で、または何らかの効果を得るために何かをラップするために、divまたはspanを使用します。

divはブロックレベルの要素であり、spanはインラインレベルの要素であり、CSSを使用して表示プロパティを変更することができます。私はまたdivspanの中に来ることができないことを知っています。

divdisplay:inlineとし、spandisplay:blockとするとどうなりますか?これらのシナリオを回避しようとするべきですか?これは意味的に間違っていますか?

ブランクdivまたはspan(内部の内容はありません)を使用して、何らかの効果が得られる場合は、正しいものですか?

+0

無料の選択肢があれば、最も便利なものを選んでください。 HTMLでは、必ずしも "真の1つの方法"ではありません。 – Alohci

答えて

17

注意しておきますが、divをブロックの仕切りに、spanをインラインコンテンツに使用する必要があります。

はい、表示タイプを変更しないようにしてください。

+2

よく言われます... div/spanの表示タイプを変更することは、bタグを斜体にすることとほぼ同じです。私は太字にタグ付けします...そして、私を信じて、私はそれをやっているのを見ました。 :P – limc

+0

はい。ブロックレベル要素とインラインレベル要素の両方を使用することができます。両方とも行うが、どちらを選択すべきか? –

+0

@Jitendra Vyas - 内部コンテンツがインラインの場合は、ブロックの場合は 'span'を使い、' div'を使います。 – Oded

2

空白の要素についてはdivは幅と高さを定義することができますが、spanの場合は適切な効果がありません。この点を証明するために

ほとんどの簡単な例は、ここでのアクションで見ることができます:http://jsfiddle.net/yahavbr/4DZkV/

+1

これは、高さ/幅がブロックレベルの要素にしか与えられないためです。上記のように、デフォルトでは、divはブロック要素であり、inline要素にまたがります。だから、空の要素については、あなたがそれらで何をしたいのか少し依存します。空の要素が通常のテキストフローの中に必要とされ、元のテキストフローであった場合、スパンは意味をなさないでしょう。 AJAXによってコンテンツを取得することを意図していました。空のdivは理にかなっています。ブロックレベルの分割線が必要な場合は、AJAXなどで画像を取得します。 – Marcus

1

は、これはまだ良い質問ですが、推奨的回答は、唯一の問題の一部に対処するように見えます。これを視点に置くのに役立つ3つのCSS表示タイプがあります:inlineblock、およびinline-blockです。あなたがこの他のStackoverflowトピックCSS display: inline vs inline-blockを読んだら、私はあなたがいくつかの有用なガイドラインを得ると思う。たとえば、要素に上下の余白と余白があることを確認する必要がある場合は、おそらくdiv(CSSスタイルinline-block)である必要があります。そうでない場合は、spanがおそらく適切です。

関連する問題