SPAN vs DIV（インラインブロック）

140

の<div style="display:inline-block">代わりにを使用する理由はありますか<span>てWebページをレイアウトするか？

スパン内にコンテンツをネストできますか？何が有効で何が無効ですか？

これを使用して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>
css  html 
— Blackjid
ソース
16
有効なxhtmlドキュメントが必要な場合は、インライン要素内にブロックレベル要素を配置することはできません。
— moorej 2009年
1
— moorej

回答:

187

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

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

<div>をinlineまたはに変更しても、厳密には無効ですinline-block。

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

— クレタス
ソース
1
そう、スパンのスタイルを設定して、divと同じように動作させることができる
— Dave
1
私は同意する傾向inline-blockに近い関係があるinline以上をblock。
— ボブ・アマン、
11
元の質問は、何が有効で、検証が必要かについて尋ねましたが、インライン要素（たとえば、内で有効）<span>と<div>は異なり、ブロック要素（内では無効）とは異なります。<span><p><div><p>
— ブライアンキャンベル、
8
@cletusは<p>ブロック要素ではありませんか？
— アリス2013
8
<p>「ブロックレベルの要素を含めることはできません」（link）というブロック要素です。したがって、例は無効です<p>が、インラインであるためそうではありません。
— Pero P.
19

有効なxhtmlドキュメントが必要な場合は、段落内にdivを置くことはできません。

また、プロパティdisplay：inline-blockを持つdivは、スパンとは異なる働きをします。スパンはデフォルトではインライン要素です。ブロックに関連付けられている幅、高さ、およびその他のプロパティを設定することはできません。一方、プロパティinline-blockを持つ要素は、周囲のテキストとともに「フロー」しますが、幅、高さなどのプロパティを設定できます。プロパティdisplay：blockを持つスパンは、同じようにフローしません。インラインブロック要素として使用しますが、キャリッジリターンを作成し、デフォルトのマージンがあります。

インラインブロックはすべてのブラウザでサポートされているわけではないことに注意してください。たとえば、Firefox 2以下では、以下を使用する必要があります。

display: -moz-inline-stack;

FF3のインラインブロック要素とは少し異なります。

素晴らしい記事があり、ここでクロスブラウザインラインブロック要素を作成するには。

— ムーレイ
ソース
-moz-inline-blockは、inline-blockにはありません。
— moorej 2009年
FF3のインラインブロックのように表示したい場合は、実際にはインラインスタックも使用する必要があります。
— moorej 2009年
非常に興味深いリンクの+1。インラインブロックが多くの問題を解決することがあった時代がありました。
— トム
5

  1. インラインブロックは、要素の表示をインラインにするかブロックするかの設定の中間点です。display：inlineのようにドキュメントのインラインフローに要素を保持しますが、display：blockと同じように要素のボックス属性（幅、高さ、垂直マージン）を操作できます。

  2. インライン要素内でブロック要素を使用してはなりません。これは無効であり、そのような慣行を行う理由はありません。

— トーヒド・ラーマン
ソース
3

私はこのQが古いことを知っていますが、SPANではなくすべてのDIVを使用しないのはなぜですか？その後、すべてが一緒にすべて幸せに再生されます。

例：

<div> 
   <div> content1(divs,p, spans, etc) </div> 
   <div> content2(divs,p, spans, etc) </div> 
   <div> content3(divs,p, spans, etc) </div> 
</div> 
<div> 
   <div> content4(divs,p, spans, etc) </div> 
   <div> content5(divs,p, spans, etc) </div> 
   <div> content6(divs,p, spans, etc) </div> 
</div>
— JMJ
ソース
1
目標は、すべてを可能な限り無駄のないセマンティックに保つことだと思います。したがって、ヘッダーがあり、内部ラッパーdivが必要な場合は、次のようにするとセマンティックが<em>見られる</ em>可能性があります：ヘッダー{}とヘッダースパン{}ヘッダー{}と.inner {} 。ただし... .innerを使用する場合は、何度も使用できます。スパンは、おそらく独立してスタイルを設定する必要があります。結論-できるだけ少ないマークアップを使用したいので、人々はdiv> div> div> div> divなどを回避する方法を模索しています
— sheriffderek
3

「display：inline-block」がなぜ便利なのかを理解するために、インライン要素（spanなど）とブロック要素（divなど）の基本的な違いを理解するのに役立つと思います。

問題：インライン要素（たとえば、スパン、a、ボタン、入力など）は、垂直方向ではなく、水平方向（マージン左およびマージン右）でのみ「マージン」を取る。垂直間隔はブロック要素でのみ機能します（または「display：block」が設定されている場合）

解決：「display：inline-block」を介した場合のみ、垂直距離（上下）も使用されます。理由：インラインエレメントスパン、外側ではブロックエレメントのように動作しますが、内側ではインラインエレメントのように動作します

ここにコード例：

 /* Inlineelement */

        div,
        span {
            margin: 30px;
        }

        span {
            outline: firebrick dotted medium;
            background-color: antiquewhite;
        }

        span.mitDisplayBlock {
            background: #a2a2a2;
            display: block;
            width: 200px;
            height: 200px;
        }

        span.beispielMargin {
            margin: 20px;
        }

        span.beispielMarginDisplayInlineBlock {
            display: inline-block;
        }

        span.beispielMarginDisplayInline {
            display: inline;
        }

        span.beispielMarginDisplayBlock {
            display: block;
        }

        /* Blockelement */

        div {
            outline: orange dotted medium;
            background-color: deepskyblue;
        }

        .paddingDiv {
            padding: 20px;
            background-color: blanchedalmond;
        }

        .marginDivWrapper {
            background-color: aliceblue;

        }

        .marginDiv {
            margin: 20px;
            background-color: blanchedalmond;
        }
    </style>
    <style>
        /* Nur für das w3school Bild */

        #w3_DIV_1 {
            bottom: 0px;
            box-sizing: border-box;
            height: 391px;
            left: 0px;
            position: relative;
            right: 0px;
            text-size-adjust: 100%;
            top: 0px;
            width: 913.984px;
            perspective-origin: 456.984px 195.5px;
            transform-origin: 456.984px 195.5px;
            background: rgb(241, 241, 241) none repeat scroll 0% 0% / auto padding-box border-box;
            border: 2px dashed rgb(187, 187, 187);
            font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
            padding: 45px;
            transition: all 0.25s ease-in-out 0s;
        }

        /*#w3_DIV_1*/

        #w3_DIV_1:before {
            bottom: 349.047px;
            box-sizing: border-box;
            content: '"Margin"';
            display: block;
            height: 31px;
            left: 0px;
            position: absolute;
            right: 0px;
            text-align: center;
            text-size-adjust: 100%;
            top: 6.95312px;
            width: 909.984px;
            perspective-origin: 454.984px 15.5px;
            transform-origin: 454.984px 15.5px;
            font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
        }

        /*#w3_DIV_1:before*/

        #w3_DIV_2 {
            bottom: 0px;
            box-sizing: border-box;
            color: black;
            height: 297px;
            left: 0px;
            position: relative;
            right: 0px;
            text-decoration: none solid rgb(255, 255, 255);
            text-size-adjust: 100%;
            top: 0px;
            width: 819.984px;
            column-rule-color: rgb(255, 255, 255);
            perspective-origin: 409.984px 148.5px;
            transform-origin: 409.984px 148.5px;
            caret-color: rgb(255, 255, 255);
            background: rgb(76, 175, 80) none repeat scroll 0% 0% / auto padding-box border-box;
            border: 0px none rgb(255, 255, 255);
            font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
            outline: rgb(255, 255, 255) none 0px;
            padding: 45px;
        }

        /*#w3_DIV_2*/

        #w3_DIV_2:before {
            bottom: 258.578px;
            box-sizing: border-box;
            content: '"Border"';
            display: block;
            height: 31px;
            left: 0px;
            position: absolute;
            right: 0px;
            text-align: center;
            text-size-adjust: 100%;
            top: 7.42188px;
            width: 819.984px;
            perspective-origin: 409.984px 15.5px;
            transform-origin: 409.984px 15.5px;
            font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
        }

        /*#w3_DIV_2:before*/

        #w3_DIV_3 {
            bottom: 0px;
            box-sizing: border-box;
            height: 207px;
            left: 0px;
            position: relative;
            right: 0px;
            text-size-adjust: 100%;
            top: 0px;
            width: 729.984px;
            perspective-origin: 364.984px 103.5px;
            transform-origin: 364.984px 103.5px;
            background: rgb(241, 241, 241) none repeat scroll 0% 0% / auto padding-box border-box;
            font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
            padding: 45px;
        }

        /*#w3_DIV_3*/

        #w3_DIV_3:before {
            bottom: 168.344px;
            box-sizing: border-box;
            content: '"Padding"';
            display: block;
            height: 31px;
            left: 3.64062px;
            position: absolute;
            right: -3.64062px;
            text-align: center;
            text-size-adjust: 100%;
            top: 7.65625px;
            width: 729.984px;
            perspective-origin: 364.984px 15.5px;
            transform-origin: 364.984px 15.5px;
            font: normal normal 400 normal 21px / 31.5px Lato, sans-serif;
        }

        /*#w3_DIV_3:before*/

        #w3_DIV_4 {
            bottom: 0px;
            box-sizing: border-box;
            height: 117px;
            left: 0px;
            position: relative;
            right: 0px;
            text-size-adjust: 100%;
            top: 0px;
            width: 639.984px;
            perspective-origin: 319.984px 58.5px;
            transform-origin: 319.984px 58.5px;
            background: rgb(191, 201, 101) none repeat scroll 0% 0% / auto padding-box border-box;
            border: 2px dashed rgb(187, 187, 187);
            font: normal normal 400 normal 15px / 22.5px Lato, sans-serif;
            padding: 20px;
        }

        /*#w3_DIV_4*/

        #w3_DIV_4:before {
            box-sizing: border-box;
            content: '"Content"';
            display: block;
            height: 73px;
            text-align: center;
            text-size-adjust: 100%;
            width: 595.984px;
            perspective-origin: 297.984px 36.5px;
            transform-origin: 297.984px 36.5px;
            font: normal normal 400 normal 21px / 73.5px Lato, sans-serif;
        }

        /*#w3_DIV_4:before*/
   <h1> The Box model - content, padding, border, margin</h1>
    <h2> Inline element - span</h2>
    <span>Info: A span element can not have height and width (not without "display: block"), which means it takes the fixed inline size </span>

    <span class="beispielMargin">
        <b>Problem:</b> inline elements (eg span, a, button, input etc.) take "margin" only vertically (margin-left and margin-right)
        on, not horizontal. Vertical spacing works only on block elements (or if display: block is set) </span>

    <span class="beispielMarginDisplayInlineBlock">
        <b>Solution</b> Only through
        <b> "display: inline-block" </ b> will also take the vertical distance (top and bottom). Reason: Inline element Span,
        behaves now like a block element to the outside, but like an inline element inside</span>

    <span class="beispielMarginDisplayInline">Example: here "display: inline". See the margin with Inspector!</span>

    <span class="beispielMarginDisplayBlock">Example: here "display: block". See the margin with Inspector!</span>

    <span class="beispielMarginDisplayInlineBlock">Example: here "display: inline-block". See the margin with Inspector! </span>

    <span class="mitDisplayBlock">Only with the "Display" -property and "block" -Value in addition, a width and height can be assigned. "span" is then like
        a "div" block element.  </span>

    <h2>Inline-Element - Div</h2>
    <div> A div automatically takes "display: block." </ div>
    <div class = "paddingDiv"> Padding is for padding </ div>

    <div class="marginDivWrapper">
Wrapper encapsulates the example "marginDiv" to clarify the "margin" (distance from inner element "marginDiv" to the text)
        of the outer element "marginDivWrapper". Here 20px;)
        
    <div class = "marginDiv"> margin is for the margins </ div>
        And there, too, 20px;
    </div>

    <h2>w3school sample image </h2>
    source:
    <a href="https://www.w3schools.com/css/css_boxmodel.asp">CSS Box Model</a>
    <div id="w3_DIV_1">
        <div id="w3_DIV_2">
            <div id="w3_DIV_3">
                <div id="w3_DIV_4">
                </div>
            </div>
        </div>
    </div>
スニペットを展開

— ビロル・エフェ
ソース
2

他の人が答えたように… divは「ブロック要素」（現在はフローコンテンツとして再定義）でspanあり、「インライン要素」（フレージングコンテンツ）です）です。はい、これらの要素のデフォルトの表示を変更できますが、「フロー」と「ブロック」、および「フレージング」と「インライン」には違いがあります。

フローコンテンツとして分類される要素は、フローコンテンツが期待される場合にのみ使用でき、フレージングコンテンツとして分類される要素は、フレージングコンテンツが予期される場合に使用できます。すべてのフレージングコンテンツはフローコンテンツであるため、フローコンテンツが予想されるあらゆる場所でフレージング要素を使用できます。仕様はより詳細な情報を提供します。

すべてのフレージングのような要素、strongとはem、できる唯一の他のフレージングの要素が含まれています。あなたが置くことができないtableの内側にcite例えば。ほとんどはのような内容に流れるdivとli、すべてのフローコンテンツの種類（だけでなく、コンテンツをフレージング）を含めることができますが、そこにいくつかの例外があります：p、pre、およびth非フレージングフローコンテンツ（「ブロック要素」）の一例であることができる唯一のフレージング含まコンテンツ（「インライン要素」）。そしてもちろん、特定の要素を含めることのみが許可されているなど、通常の要素の制限がdlありtableます。

双方の間にdivおよびp非フレージングされているフローコンテンツ、div（多くを含む他のフローコンテンツの子供含めることができますdiv秒とp秒）。一方、pフレージングコンテンツの子のみを含めることができます。つまり、両方がフレージングのないフロー要素であっても、div内部にを置くことはできませんp。

これがキッカーです。これらのセマンティック仕様は、要素の表示方法とは関係ありません。あなたが持っている場合はこのように、div内部にaをspan、あなたが持っている場合でも、検証エラーになりますspan {display: block;}し、div {display: inline;}あなたのCSSインチ

— Chharvey
ソース
インラインブロック内のインラインブロックとインラインブロック内のブロックはどうですか？
— user764754 2016
@ user764754仕様に準拠している限り、必要に応じて任意の要素のスタイルを設定でき、それは引き続き有効です。（inline-blockCSSスタイルであり、要素やコンテンツモデルのタイプではありません。）
— chharvey
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.