SPAN vs DIV (inline-block)

140

Czy jest jakiś powód, aby używać a <div style="display:inline-block">zamiast a <span>do tworzenia układu strony internetowej?

Czy mogę umieścić zawartość zagnieżdżoną w zakresie? Co jest ważne, a co nie?

Czy można użyć tego do stworzenia układu tabeli 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
źródło

16

Jeśli wybierasz prawidłowy dokument xhtml, nie możesz umieszczać elementów blokowych wewnątrz elementów wbudowanych.

— moorej

1

wiki o elementach html en.wikipedia.org/wiki/HTML_element

— moorej

187

Według specyfikacji HTML , <span>jest elementem inline i <div>jest elementem bloku. Teraz można to zmienić za pomocą displaywłaściwości CSS, ale jest jeden problem: jeśli chodzi o walidację HTML, nie możesz umieszczać elementów blokowych wewnątrz elementów wbudowanych, więc:

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

nie jest to bezwzględnie obowiązuje nawet w przypadku zmiany <div>na inlinelub inline-block.

Tak więc, jeśli twój element jest inlinelub inline-blockużyj <span>. Jeśli jest to blockelement poziomu, użyj <div>.

— cletus
źródło

1

tak, możesz wystylizować zakres i sprawić, by zachowywał się jak div

— Dave,

1

Zgadzam się, że inline-blockma bliższy związek z inlineniż block.

— Bob Aman

11

Pierwotne pytanie dotyczyło tego, co jest ważne i do walidacji, <span>i <div>rzeczywiście są różne, podobnie jak <span>element inline (ważny <p>na przykład w a), podczas gdy <div>jest elementem blokowym (nie jest ważny w a <p>).

— Brian Campbell

8

@cletus nie jest <p> elementem blokowym?

— Aris,

8

<p>jest elementem blokowym, który „nie może zawierać elementów blokowych” ( link ), więc chociaż przykład jest nieprawidłowy, nie <p>dzieje się tak, ponieważ jest wbudowany.

— Pero P.

19

Jeśli chcesz mieć prawidłowy dokument xhtml, nie możesz umieścić elementu div wewnątrz akapitu.

Ponadto element div z właściwością display: inline-block działa inaczej niż span. Zakres jest domyślnie elementem wbudowanym, nie można ustawić szerokości, wysokości ani innych właściwości skojarzonych z blokami. Z drugiej strony element z właściwością inline-block będzie nadal „płynął” z otaczającym tekstem, ale możesz ustawić takie właściwości, jak szerokość, wysokość itp. Rozpiętość z właściwością display: blok nie będzie płynąć w ten sam sposób jako element inline-block, ale utworzy powrót karetki i będzie miał domyślny margines.

Należy pamiętać, że blokowanie inline nie jest obsługiwane we wszystkich przeglądarkach. Na przykład w przeglądarce Firefox 2 i nowszych musisz użyć:

display: -moz-inline-stack;

który wyświetla się nieco inaczej niż wbudowany element bloku w FF3.

Jest to świetny artykuł tutaj na tworzeniu elementów inline-blokowe krzyż przeglądarki.

— moorej
źródło

-moz-inline-block nie robi tego inline-block.

— moorej

Jeśli chcesz, aby wyświetlał się bardziej jak blok inline w FF3, powinieneś również użyć stosu inline.

— moorej

+1 za bardzo interesujący link. Zdarzało się, że blokowanie inline rozwiązało wiele problemów.

— Tom

5

Inline-block to półmetek pomiędzy ustawieniem wyświetlania elementu na inline lub to block. Utrzymuje element w wewnętrznym przepływie dokumentu, podobnie jak display: inline, ale możesz manipulować atrybutami pola elementu (szerokość, wysokość i pionowe marginesy), tak jak w przypadku display: block.
Nie wolno nam używać elementów blokowych w elementach wbudowanych. Jest to nieważne i nie ma powodu, aby robić takie praktyki.

— Touhid Rahman
źródło

3

Wiem, że ten Q jest stary, ale dlaczego nie użyć wszystkich DIV zamiast SPAN? Wtedy wszystko gra razem szczęśliwie.

Przykład:

<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
źródło

1

Myślę, że celem jest, aby wszystko było tak oszczędne i semantyczne, jak to tylko możliwe. Więc jeśli masz nagłówek i chcesz mieć wewnętrzny element div opakowujący - może <em> wydawać się </em> bardziej semantyczny, aby mieć: nagłówek {} i rozpiętość nagłówka {}, to miałby mieć nagłówek {} i .inner {} . Jednak ... jeśli używasz .inner, możesz go używać wiele razy - przęsła najprawdopodobniej będą musiały być stylizowane niezależnie. Podsumowując - chcesz używać jak najmniejszej liczby znaczników - aby ludzie próbowali znaleźć sposoby uniknięcia div> div> div> div> div itp.

— sheriffderek

3

Myślę, że pomoże ci to zrozumieć podstawowe różnice między elementami Inline-Elements (np. Span) i Block-Elements (np. Div), aby zrozumieć, dlaczego "display: inline-block" jest tak przydatne.

Problem : elementy inline (np. Span, a, button, input itd.) Przyjmują „margines” tylko poziomo (margin-left i margin-right) na, a nie pionowo. Odstępy w pionie działają tylko na elementach blokowych (lub jeśli ustawiono „display: block”)

Rozwiązanie : Tylko poprzez "display: inline-block" również przyjmuje się odległość pionową (góra i dół). Przyczyna: element Inline Span zachowuje się teraz jak element blokowy na zewnątrz, ale jak element wbudowany wewnątrz

Oto przykłady kodu:

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

Rozwiń fragment

— Birol Efe
źródło

2

Jak odpowiedzieli inni… divjest „elementem blokowym” (teraz przedefiniowanym jako Flow Content ) i spanjest „elementem inline” ( Phrasing Content ). Tak, możesz zmienić domyślną prezentację tych elementów, ale istnieje różnica między „przepływem” a „blokiem” i „frazowaniem” a „w tekście”.

Element sklasyfikowany jako zawartość przepływu może być używany tylko wtedy, gdy oczekiwana jest zawartość przepływu, a element sklasyfikowany jako zawartość frazowania może być używany, gdy oczekiwana jest zawartość frazowania. Ponieważ cała zawartość frazowania jest zawartością przepływu, element frazowania może być również używany wszędzie tam, gdzie oczekuje się zawartości przepływu. Specyfikacje zawierają bardziej szczegółowe informacje .

Wszystkie elementy frazujące, takie jak strongi em, mogą zawierać tylko inne elementy frazujące: nie możesz na przykład wstawić a tablewewnątrz cite. Większość przepływu zawartości, takich jak divi limoże zawierać wszystkie typy treści przepływu (oraz sformułowanie zawartości), ale są pewne wyjątki p, prei thprzykłady nie-frazowania zawartości przepływu ( „elementy blokowe”), która może tylko zawierać sformułowania treść („elementy wbudowane”). I oczywiście są normalne ograniczenia elementów jak dli tabletylko pozwolono zawierać pewne elementy.

Podczas gdy obie divi pnie są frazową zawartością przepływu, divmogą zawierać inne elementy podrzędne zawartości przepływu (w tym więcej divznaków i p). Z drugiej strony pmoże zawierać tylko frazowanie treści podrzędne. Oznacza to, że nie można wstawić a divwewnątrz a p, mimo że oba są niefrazowanymi elementami przepływu.

Teraz jest kicker. Te specyfikacje semantyczne nie są związane ze sposobem wyświetlania elementu. Tak więc, jeśli masz divwewnątrz a span, otrzymasz błąd walidacji, nawet jeśli masz span {display: block;}i div {display: inline;}w swoim CSS.

— chharvey
źródło

A co z blokiem inline wewnątrz inline i blokiem wewnątrz bloku inline?

— user764754

@ user764754, o ile przestrzegasz specyfikacji, możesz dowolnie stylizować dowolny element i nadal będzie on ważny. ( inline-blockjest stylem CSS, a nie typem elementu lub modelu treści).

— chharvey