☰

SPAN vs DIV (インラインブロック) 質問する

tag-icon • tag-icon css html
SPAN vs DIV (インラインブロック) 質問する

Web ページをレイアウトする<div style="display:inline-block">際に ではなくを使用する理由はありますか?<span>

span 内にネストされたコンテンツを配置できますか? 何が有効で、何が有効でないですか?

これを使って3x2のテーブルのようなレイアウトを作っても大丈夫ですか？

<div>
   <span> content1(divs,p, spans, etc) </span>
   <span> content2(divs,p, spans, etc) </span>
   <span> content3(divs,p, spans, etc) </span>
</div>
<div>
   <span> content4(divs,p, spans, etc) </span>
   <span> content5(divs,p, spans, etc) </span>
   <span> content6(divs,p, spans, etc) </span>
</div>

ベストアンサー1

HTML仕様によるとは<span>インライン要素であり、<div>ブロック要素です。これはdisplayCSS プロパティを使用して変更できますが、1 つ問題があります。HTML 検証の観点から、インライン要素内にブロック要素を配置することはできないため、次のようになります。

<p>...<div>foo</div>...</p>

をまたは<div>に変更したとしても、厳密には有効ではありません。inlineinline-block

したがって、要素がinlineまたは の場合はinline-blockを使用します<span>。レベル要素の場合はblockを使用します<div>。

おすすめ記事