SPAN vs DIV (inline-block)

140

Apakah ada alasan untuk menggunakan <div style="display:inline-block">bukan <span>untuk tata letak halaman web?

Bisakah saya menempatkan konten bersarang di dalam rentang? Apa yang valid dan apa yang tidak?

Tidak apa-apa menggunakan ini untuk membuat tabel 3x2 seperti tata letak?

<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
sumber
16
Jika Anda akan mencari dokumen xhtml yang valid maka Anda tidak bisa memasukkan elemen level blok ke dalam elemen inline.
moorej
1
wiki pada elemen html en.wikipedia.org/wiki/HTML_element
moorej

Jawaban:

187

Menurut spesifikasi HTML , <span>elemen inline dan <div>elemen blok. Sekarang itu bisa diubah menggunakan displayproperti CSS tetapi ada satu masalah: dalam hal validasi HTML, Anda tidak bisa memasukkan elemen blok ke dalam elemen inline jadi:

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

tidak sepenuhnya benar bahkan jika Anda mengubah <div>ke inlineatau inline-block.

Jadi, jika elemen Anda adalah inlineatau inline-blockmenggunakan a <span>. Jika blockelemen level, gunakan a <div>.

cletus
sumber
1
ya, Anda dapat gaya rentang dan membuatnya berperilaku seperti div
Dave
1
Saya cenderung setuju bahwa inline-blockmemiliki hubungan yang lebih dekat inlinedaripada block.
Bob Aman
11
Pertanyaan awal bertanya tentang apa yang valid, dan untuk validasi, <span>dan <div>memang berbeda, seperti <span>elemen inline (valid dalam a <p>, misalnya), sedangkan <div>elemen blok (tidak valid dalam a <p>).
Brian Campbell
8
@cletus bukan <p> elemen blok?
Aris
8
<p>adalah elemen blok yang "tidak dapat mengandung elemen level blok" ( tautan ), jadi walaupun contohnya tidak valid, itu bukan karena <p>inline.
Pero P.
19

Jika Anda ingin memiliki dokumen xhtml yang valid maka Anda tidak bisa memasukkan div di dalam paragraf.

Juga, div dengan tampilan properti: inline-block bekerja secara berbeda dari span. Rentang secara default elemen inline, Anda tidak dapat mengatur lebar, tinggi, dan properti lainnya yang terkait dengan blok. Di sisi lain, elemen dengan blok inline properti masih akan "mengalir" dengan teks di sekitarnya tetapi Anda dapat mengatur properti seperti lebar, tinggi, dll. Rentang dengan tampilan properti: blok tidak akan mengalir dengan cara yang sama sebagai elemen inline-blok tetapi akan membuat carriage return dan memiliki margin default.

Perhatikan bahwa inline-block tidak didukung di semua browser. Misalnya di Firefox 2 dan lebih sedikit Anda harus menggunakan:

display: -moz-inline-stack;

yang menampilkan sedikit berbeda dari elemen blok sebaris di FF3.

Ada artikel bagus di sini tentang cara membuat elemen lintas-blok lintas-browser.

moorej
sumber
-moz-inline-block tidak inline-block tidak.
moorej
Jika Anda ingin menampilkan lebih banyak seperti blok inline di FF3 Anda harus benar-benar menggunakan inline-stack juga.
moorej
+1 untuk tautan yang sangat menarik. Ada kalanya inline-block akan memecahkan sejumlah masalah.
Tom
5

  1. Inline-block adalah titik setengah antara mengatur tampilan elemen menjadi inline atau untuk memblokir. Itu membuat elemen dalam aliran inline dokumen seperti tampilan: inline tidak, tetapi Anda dapat memanipulasi atribut kotak elemen (lebar, tinggi dan margin vertikal) seperti yang Anda bisa dengan tampilan: blok.

  2. Kita tidak boleh menggunakan elemen blok dalam elemen sebaris. Ini tidak valid dan tidak ada alasan untuk melakukan praktik tersebut.

Touhid Rahman
sumber
3

Saya tahu Q ini sudah tua, tetapi mengapa tidak menggunakan semua DIV daripada SPAN? Lalu semuanya memainkan semua bahagia bersama.

Contoh:

<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
sumber
1
Saya pikir tujuannya adalah untuk menjaga segala sesuatu tetap ramping dan semantik mungkin. Jadi jika Anda memiliki header dan Anda ingin div pembungkus dalam - Ini mungkin <em> tampaknya </em> lebih semantik untuk memiliki: header {} dan span header {} maka itu akan memiliki header {} dan .inner {} . Namun ... jika Anda menggunakan .inner, Anda dapat menggunakannya berkali-kali - rentang kemungkinan besar harus ditata secara independen. Intinya - Anda ingin menggunakan markup sesedikit mungkin - sehingga orang berusaha mencari cara untuk menghindari div> div> div> div> div dll.
sheriffderek
3

Saya pikir ini akan membantu Anda untuk memahami perbedaan dasar antara Inline-Elements (mis span) dan Block-Elements (eg div), untuk memahami mengapa "display: inline-block" sangat berguna.

Masalah : elemen sebaris (mis. Span, a, tombol, input, dll.) Gunakan "margin" hanya secara horizontal (margin-kiri dan margin-kanan), bukan vertikal. Penspasian vertikal hanya berfungsi pada elemen blok (atau jika "tampilan: blok" disetel)

Solusi : Hanya melalui "display: inline-block" juga akan mengambil jarak vertikal (atas dan bawah). Alasan: Inline elemen Span, berlaku sekarang seperti elemen blok ke luar, tetapi seperti elemen inline di dalam

Berikut Contoh Kode:

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

Birol Efe
sumber
2

Seperti yang orang lain jawab ... divadalah "elemen blok" (sekarang didefinisikan ulang sebagai Konten Flow ) dan spanmerupakan "elemen inline" ( Konten Frasa ). Ya, Anda dapat mengubah presentasi default dari elemen-elemen ini, tetapi ada perbedaan antara "flow" versus "block", dan "phrasing" versus "inline".

Elemen yang diklasifikasikan sebagai konten aliran hanya dapat digunakan di mana konten aliran diharapkan, dan elemen yang diklasifikasikan sebagai konten ungkapan dapat digunakan di mana konten frase diharapkan. Karena semua konten ungkapan adalah konten mengalir, elemen frase juga dapat digunakan di mana pun konten mengalir diharapkan. Spesifikasi memberikan info lebih rinci .

Semua elemen frasa, seperti strongdan em, hanya bisa berisi elemen frasa lain: Anda tidak bisa memasukkan bagian tabledalam citemisalnya. Sebagian mengalir konten seperti divdan lidapat berisi semua jenis konten aliran (serta ungkapan konten), tetapi ada beberapa pengecualian: p, pre, dan thadalah contoh dari konten aliran non-ungkapan ( “elemen blok”) yang dapat hanya mengandung kalimat konten ("elemen sebaris"). Dan tentu saja ada batasan elemen normal seperti dldan tablehanya diizinkan mengandung elemen tertentu.

Meskipun keduanya divdan pmerupakan konten aliran non-frasa, divdapat berisi konten aliran lainnya anak-anak (termasuk lebih divdan lebih banyak p). Di sisi lain, pmungkin hanya mengandung konten ungkapan anak-anak. Itu berarti Anda tidak dapat meletakkan bagian divdalam p, meskipun keduanya adalah elemen aliran non-frasa.

Sekarang inilah kickernya. Spesifikasi semantik ini tidak terkait dengan bagaimana elemen ditampilkan. Dengan demikian, jika Anda memiliki bagian divdalam span, Anda akan mendapatkan kesalahan validasi bahkan jika Anda memiliki span {display: block;}dan div {display: inline;}dalam CSS Anda.

chharvey
sumber
Bagaimana dengan inline-blok di dalam inline dan blok di dalam inline-blok?
user764754
@ user764754 selama Anda mematuhi spesifikasi, Anda dapat mendesain elemen apa pun yang Anda inginkan dan itu masih akan valid. ( inline-blockadalah gaya CSS, bukan jenis elemen atau model konten.)
chharvey