SPAN ve DIV (satır içi blok)

140

Bir web sayfasını düzenlemek için bir <div style="display:inline-block">yerine kullanmak için herhangi bir neden var mı <span>?

İçeriği aralık içine yerleştirebilir miyim? Geçerli olan ve olmayan nedir?

3x2 tablo gibi bir düzen yapmak için bunu kullanmakta sorun yok mu?

<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
kaynak

16

Geçerli bir xhtml belgesi için gidiyorsanız, satır düzeyinde öğelerin içine blok düzeyi öğeleri koyamazsınız.

— moorej

1

html öğeleri üzerinde wiki en.wikipedia.org/wiki/HTML_element

— moorej

187

HTML spec göre , <span>bir satır içi unsurdur ve <div>bir blok elemanıdır. Şimdi bu displayCSS özelliği kullanılarak değiştirilebilir, ancak bir sorun vardır: HTML doğrulaması açısından, satır öğelerini satır içi öğelerin içine koyamazsınız:

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

Değiştirmek bile kesinlikle geçerli değildir <div>etmek inlineveya inline-block.

Öyleyse, öğeniz inlineveya inline-blockbir <span>. Bir buysa blockdüzey öğe, bir kullanın <div>.

— cletus
kaynak

1

evet, bir span stil ve bir div gibi davranmasını yapabilirsiniz

— Dave

1

Daha inline-blockyakın bir ilişki içinde inlineolduğu konusunda hemfikirim block.

— Bob Aman

11

Orijinal soru, neyin geçerli olduğunu ve doğrulama için sorduğunu <span>ve <div>gerçekten de farklı olduğunu, <span>bir satır içi öğe olduğu gibi ( <p>örneğin, bir içinde geçerli ), <div>bir blok öğesi (a içinde geçerli değil <p>).

— Brian Campbell

8

@cletus <p> bir blok öğesi değil mi?

— Aris

8

<p>"blok düzeyinde elemanlar içeremez" ( link ), öyleyse örnek geçersizken <p>satır içi olduğu için değildir .

— Pero P.

19

Geçerli bir xhtml belgesine sahip olmak istiyorsanız, paragrafın içine div koyamazsınız.

Ayrıca, özellik ekranına sahip bir div: satır içi blok bir açıklıktan farklı çalışır. Span varsayılan olarak bir satır içi öğedir, bloklarla ilişkili genişliği, yüksekliği ve diğer özellikleri ayarlayamazsınız. Diğer taraftan, özelliği içi blok bir elementi, bir çevreleyen metinle "akış", ancak bu tür özelliği ekran ile bir genişlik, yükseklik, süresi gibi özelliklerini ayarlamak: Blok olacak değil aynı şekilde akış satır içi blok öğesi olarak kullanılır, ancak satır başı oluşturur ve varsayılan kenar boşluğuna sahiptir.

Satır içi bloğun tüm tarayıcılarda desteklenmediğini unutmayın. Örneğin Firefox 2 ve daha yenisinde kullanmanız gerekir:

display: -moz-inline-stack;

FF3'teki satır içi blok öğesinden biraz farklı görüntülenen.

Burada çapraz tarayıcı satır içi blok öğeleri oluşturma hakkında harika bir makale var .

— moorej
kaynak

-moz-satır içi blok satır içi blok yapmaz.

— moorej

FF3'te daha fazla satır içi blok gibi görüntülenmesini istiyorsanız, satır içi yığını da kullanmalısınız.

— moorej

Çok ilginç bağlantı için +1. Satır içi bloğun bir takım problemleri çözeceği zamanlar olmuştur.

— Tom

5

Satır içi blok, bir öğenin ekranını satır içi veya blok olarak ayarlamak arasında bir yarım noktadır. Öğeyi, display: inline gibi belgenin satır içi akışında tutar, ancak display: block ile öğenin kutu niteliklerini (genişlik, yükseklik ve dikey kenar boşlukları) olabildiğince değiştirebilirsiniz.
Satır öğeleri içinde blok öğeleri kullanmamalıyız. Bu geçersizdir ve bu tür uygulamaları yapmak için hiçbir neden yoktur.

— Touhid Rahman
kaynak

3

Bu Q'nun eski olduğunu biliyorum, ama neden SPAN'lar yerine tüm DIV'leri kullanmıyorsunuz? Sonra her şey birlikte mutlu oynar.

Misal:

<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
kaynak

1

Bence amaç her şeyi mümkün olduğunca yalın ve anlamsal tutmak. Bir başlığınız varsa ve bir iç sarmalayıcı div istiyorsanız - <em> sahip olmak daha semantik görünebilir: header {} ve header span} {} ve {} ve .inner {} . Ancak ... .ner'i kullanırsanız, birçok kez kullanabilirsiniz - açıklıklar büyük olasılıkla bağımsız bir şekilde biçimlendirilmelidir. Alt satır - mümkün olduğunca az biçimlendirme kullanmak istiyorsunuz - bu yüzden insanlar div> div> div> div> div vb. Önlemek için yollar bulmaya çalışıyorlar

— sheriffderek

3

"Display: inline-block" un neden bu kadar yararlı olduğunu anlamak için Inline-Elements (örn. Span) ve Block-Elements (örn. Div) arasındaki temel farkları anlamanıza yardımcı olacağını düşünüyorum.

Sorun : Satıriçi elemanlar (örn. Açıklık, a, düğme, giriş vb.) "Kenar boşluğunu" sadece yatay olarak (kenar boşluğu-sol ve kenar-sağ) alır, dikey olarak değil. Dikey boşluk yalnızca blok elemanlarında çalışır (veya "display: block" ayarlıysa)

Çözüm : Yalnızca "display: inline-block" aracılığıyla dikey mesafeyi alır (üst ve alt). Sebep: Satır içi öğe Span, şimdi dışarıdaki bir blok öğesi gibi davranıyor, ancak içerideki bir satır içi öğe gibi davranıyor

Kod Örnekleri:

 /* 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>

Snippet'i genişlet

— Birol Efe
kaynak

2

Diğerlerinin yanıtladığı gibi… divbir “blok elemanı” (şimdi Akış İçeriği olarak yeniden tanımlanmaktadır ) ve spanbir “satır içi eleman” dır ( İfade İçeriği ). Evet, bu öğelerin varsayılan sunumunu değiştirebilirsiniz, ancak “akış” ile “blok” ve “ifade” ile “satır içi” arasında bir fark vardır.

Akış içeriği olarak sınıflandırılan bir öğe yalnızca akış içeriğinin beklendiği yerlerde kullanılabilir ve ifade içeriği olarak sınıflandırılan bir öğe, ifade içeriğinin beklendiği yerlerde kullanılabilir. Tüm cümleleme içerik yana olduğunu içerikleri akış, bir cümleleme elemanı da içerik beklenen akış yerde kullanılabilir. Teknik özellikler daha ayrıntılı bilgi sağlar .

Tüm cümleleme gibi unsurlar strongve em, olabilir ancak diğer cümleleme elemanlarını içerir: Bir koyamazsınız tablebir iç citemesela. Çoğu gibi içerik akış divve liakış her türlü içeriği içerebilir (aynı zamanda içerik phrasing gibi), ancak birkaç istisna vardır: p, preve thsigara phrasing akış içerik örnekleri arasında ki ( “blok elemanları”) olan sadece phrasing içerebilir içerik ("satır içi öğeler"). Elbette bu gibi normal eleman kısıtlama yoktur dlve tablesadece belirli elemanları içeren izin verildi.

Hem divve hem de pifade olmayan akış içeriği olsa da, divdiğer akış içeriği çocuklarını içerebilir (daha fazla divs ve ps dahil ). Öte yandan, pyalnızca kelime öbek içeriği çocuklar içerebilir. Bu , her ikisi de ifade etmeyen akış öğeleri olmasına rağmen, diviçine a pkoyamayacağınız anlamına gelir .

Şimdi işte vurucu. Bu anlamsal özellikler, öğenin görüntülenme şekliyle ilişkisizdir. Böylece, diviçinde bir spana varsa , CSS'nizde span {display: block;}ve div {display: inline;}içinde olsa bile bir doğrulama hatası alırsınız .

— chharvey
kaynak

Satır içi satır içi blok içi ve satır içi blok içindeki blok nedir?

— user764754

@ user764754 şartnamelere bağlı kaldığınız sürece herhangi bir öğeyi istediğiniz gibi biçimlendirebilirsiniz ve yine de geçerli olacaktır. ( inline-blockbir CSS stilidir, bir tür öğe veya içerik modeli değildir.)

— chharvey