Pertanyaan Bagaimana cara menghapus ruang di antara elemen-elemen inline-block?


Mengingat HTML dan CSS ini:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

Akibatnya, akan ada ruang lebar 4 piksel di antara elemen SPAN.

Demo:  http://jsfiddle.net/dGHFV/

Saya mengerti mengapa ini terjadi, dan saya juga tahu bahwa saya bisa membuang ruang itu dengan menghapus spasi-putih di antara elemen SPAN dalam kode sumber HTML, seperti:

<p>
    <span> Foo </span><span> Bar </span>
</p>

Namun, saya berharap untuk solusi CSS yang tidak memerlukan kode sumber HTML untuk dirusak.

Saya tahu cara mengatasi ini dengan JavaScript - dengan menghapus node teks dari elemen penampung (paragraf), seperti:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

Demo:  http://jsfiddle.net/dGHFV/1/

Tetapi dapatkah masalah ini diselesaikan dengan CSS saja?


868
2018-02-22 12:41


asal


Jawaban:


Karena jawaban ini menjadi agak populer, saya menulis ulang secara signifikan.

Jangan lupa pertanyaan sebenarnya yang ditanyakan:

Bagaimana cara menghapus ruang antara elemen blok inline? aku berharap   untuk solusi CSS yang tidak memerlukan kode sumber HTML   dirusak. Bisakah masalah ini diselesaikan dengan CSS saja?

Saya t aku s mungkin untuk memecahkan masalah ini dengan CSS saja, tetapi tidak ada sama sekali perbaikan CSS yang kuat.

Solusi yang saya miliki dalam jawaban awal saya adalah menambahkan font-size: 0 ke elemen induk, dan kemudian menyatakan yang masuk akal font-size pada anak-anak.

http://jsfiddle.net/thirtydot/dGHFV/1361/

Ini berfungsi dalam versi terbaru dari semua browser modern. Ia bekerja di IE8. Itu tidak berfungsi di Safari 5, tapi itu tidak bekerja di Safari 6. Safari 5 adalah browser yang hampir mati (0,33%, Agustus 2015).

Sebagian besar masalah yang mungkin dengan ukuran font relatif tidak rumit untuk diperbaiki.

Namun, sementara ini adalah solusi yang masuk akal jika Anda khusus membutuhkan CSS hanya memperbaiki, bukan itu yang saya sarankan jika Anda bebas untuk mengubah HTML Anda (seperti kebanyakan dari kita).


Inilah yang saya, sebagai pengembang web yang cukup berpengalaman, benar-benar dilakukan untuk mengatasi masalah ini:

<p>
    <span>Foo</span><span>Bar</span>
</p>

Ya itu betul. Saya menghapus spasi dalam HTML di antara elemen-elemen blok sebaris.

Mudah. Itu mudah. Ia bekerja di mana-mana. Ini solusi pragmatis.

Anda kadang-kadang harus hati-hati mempertimbangkan darimana datangnya whitespace. Akan menambahkan elemen lain dengan JavaScript menambahkan spasi? Tidak, tidak jika Anda melakukannya dengan benar.

Mari kita lakukan perjalanan ajaib dengan berbagai cara untuk menghapus ruang kosong, dengan beberapa HTML baru:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
  • Anda dapat melakukan ini, seperti yang biasanya saya lakukan:

    <ul>
        <li>Item 1</li><li>Item 2</li><li>Item 3</li>
    </ul>
    

    http://jsfiddle.net/thirtydot/dGHFV/1362/

  • Atau ini:

    <ul>
        <li>Item 1</li
        ><li>Item 2</li
        ><li>Item 3</li>
    </ul>
    
  • Atau, gunakan komentar:

    <ul>
        <li>Item 1</li><!--
        --><li>Item 2</li><!--
        --><li>Item 3</li>
    </ul>
    
  • Atau, kamu bisa bahkan lewati tertentu menutup semua tag (semua browser baik-baik saja dengan ini):

    <ul>
        <li>Item 1
        <li>Item 2
        <li>Item 3
    </ul>
    

Sekarang saya telah pergi dan membuat Anda bosan sampai mati dengan "seribu cara yang berbeda untuk menghapus spasi, sebesar tiga puluh detik", semoga Anda telah melupakan semua tentang font-size: 0.


Atau, Anda sekarang dapat menggunakan flexbox untuk mencapai banyak tata letak yang sebelumnya telah Anda gunakan inline-block untuk: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


846
2018-02-22 12:47



Untuk browser yang sesuai CSS3 ada white-space-collapsing:discard 

Lihat: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing


139
2018-02-22 12:52



Ok, meskipun saya sudah menaikkan suara keduanya font-size: 0; dan not implemented CSS3 feature jawaban, setelah mencoba saya menemukan itu tidak satupun dari mereka adalah solusi nyata.

Sebenarnya, tidak ada satu solusi tanpa efek samping yang kuat.

Kemudian Saya memutuskan untuk menghapus spasi (jawaban ini adalah tentang argumen ini) antara inline-block divs dari saya HTML sumber (JSP), mengubah ini:

<div class="inlineBlock">
    I'm an inline-block div
</div>
<div class="inlineBlock">
    I'm an inline-block div
</div>

untuk ini

<div class="inlineBlock">
    I'm an inline-block div
</div><div class="inlineBlock">
    I'm an inline-block div
</div>

itu jelek, tapi berhasil.

Tapi, tunggu sebentar ... bagaimana jika saya menghasilkan div saya di dalam Taglibs loops (Struts2, JSTL, dll ...)?

Sebagai contoh:

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour">
        <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
            <div class="inlineBlock>
                I'm an inline-block div in a matrix 
                (Do something here with the pushed object...)
           </div>
       </s:push>
    </s:iterator>
</s:iterator>

Sama sekali tidak masuk akal untuk menyatukan semua hal itu, itu artinya

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div></s:push></s:iterator>
</s:iterator>

yang tidak terbaca, sulit untuk mantain dan mengerti, dll ...

Solusi yang saya temukan:

gunakan komentar HTML untuk menghubungkan ujung dari satu div ke awal dari yang berikutnya!

<s:iterator begin="0" end="6" status="ctrDay">
   <br/>
   <s:iterator begin="0" end="23" status="ctrHour"><!--
    --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
        --><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div><!--
    --></s:push><!--
--></s:iterator>
</s:iterator>

Dengan cara ini Anda akan memiliki kode indentasi yang terbaca dan benar.

Dan, sebagai efek samping yang positif, HTML source, meskipun penuh dengan komentar kosong, akan menghasilkan indentasi yang benar;

mari ambil contoh pertama, imho ini:

    <div class="inlineBlock">
        I'm an inline-block div
    </div><!--
 --><div class="inlineBlock">
        I'm an inline-block div
    </div>

lebih baik dari ini

    <div class="inlineBlock">
         I'm an inline-block div
    </div><div class="inlineBlock">
         I'm an inline-block div
    </div>

Semoga itu membantu ...


77
2018-02-08 16:12



Menambahkan komentar antar elemen TIDAK memiliki ruang putih. Bagi saya itu lebih mudah daripada me-reset ukuran font ke nol dan kemudian mengaturnya kembali.

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

34
2018-03-13 12:02



Ini adalah jawaban yang sama yang saya berikan pada yang terkait: Tampilan: Blok sebaris - Apakah ruang itu?

Sebenarnya ada cara yang sangat sederhana untuk menghapus spasi dari blok-inline yang mudah dan semantik. Ini disebut font khusus dengan spasi nol-lebar, yang memungkinkan Anda menciutkan ruang kosong (ditambahkan oleh browser untuk elemen inline ketika mereka berada di jalur terpisah) di tingkat font menggunakan font yang sangat kecil. Setelah Anda mendeklarasikan font, Anda tinggal mengubah font-family di wadah dan kembali lagi pada anak-anak, dan voila. Seperti ini:

@font-face{ 
    font-family: 'NoSpace';
    src: url('../Fonts/zerowidthspaces.eot');
    src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/zerowidthspaces.woff') format('woff'),
         url('../Fonts/zerowidthspaces.ttf') format('truetype'),
         url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
    font-face: 'OpenSans', sans-serif;
}

.inline-container {
    font-face: 'NoSpace';
}

.inline-container > * {
    display: inline-block;
    font-face: 'OpenSans', sans-serif;
}

Cocok untuk dicicipi. Berikut ini unduhan ke font yang baru saya buat di font-forge dan dikonversi dengan generator webfont FontSquirrel. Membawa saya semua dari 5 menit. Css @font-face deklarasi termasuk: zip spasi spasi nol-lebar. Ini ada di Google Drive jadi Anda harus mengeklik File> Unduh untuk menyimpannya ke komputer Anda. Anda mungkin perlu mengubah jalur font juga jika Anda menyalin deklarasi ke file css utama Anda.


26
2017-12-09 14:51



Semua teknik eliminasi ruang untuk display:inline-block adalah peretasan jahat ...

Menggunakan Flexbox 

Ini luar biasa, memecahkan semua tata letak inline-blok bs ini, dan sejak tahun 2017 Dukungan browser 98% (lebih jika Anda tidak peduli tentang IEs lama).


26
2017-12-13 14:21



Dua opsi lainnya berdasarkan Modul Teks CSS Level 3 (dari pada white-space-collapsing:discard yang telah diturunkan dari draft spekulasi):

  • word-spacing: -100%;

Secara teori, ia harus melakukan apa yang dibutuhkan - mempersingkat ruang putih     antara 'kata-kata' dengan 100% dari lebar karakter spasi, yaitu untuk     nol. Tapi sepertinya tidak bekerja di mana saja, sayangnya, dan ini     fitur ditandai 'beresiko' (dapat diturunkan dari spesifikasi juga).

  • word-spacing: -1ch;

Ini lebih pendek ruang antar-kata dengan lebar digit '0'. Dalam font monospace itu harus persis sama dengan lebar karakter ruang (dan karakter lain juga). Ini berfungsi di Firefox 10+, Chrome 27+, dan hampir berfungsi di Internet Explorer 9+.

Biola


15
2017-07-24 02:42