Bagaimana untuk menghapuskan ruang putih antara elemen sebaris/sebaris-blok?

Question

Akan terdapat ruang selebar 4 piksel antara elemen span

span {
  paparan: inline-block;
  lebar: 100px;
  warna latar belakang: ungu pucat;
}

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

Demonstrasi Fiddle

Saya tahu saya boleh mengalih keluar ruang ini dengan mengalih keluar ruang antara elemen span

   Foo 


Saya sedang mencari penyelesaian CSS yang tidak melibatkan: 

Ubah suai HTML. 
Gunakan JavaScript. 

Answer 1

Untuk pelayar yang mematuhi CSS3, anda boleh menggunakan white-space-collapsing:discardproperty

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

Answer 2

Sebagai alternatif, anda boleh menggunakan flexbox untuk mencapai banyak reka letak yang mungkin anda capai sebelum ini menggunakan inline-block: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

Memandangkan jawapan ini telah menjadi agak popular, saya menulis semula.

Jangan lupa soalan sebenar yang ditanya:

Masalah ini boleh diselesaikan hanya menggunakan CSS, tetapi tiada pembetulan CSS yang stabil sepenuhnya.

Penyelesaian yang saya cadangkan dalam jawapan asal saya ialah menambah font-size: 0，然后在子元素中声明合理的font-size dalam elemen induk.

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

Ini berfungsi dalam versi terkini semua penyemak imbas moden. Ia berfungsi dalam IE8. Ia tidak berfungsi dalam Safari 5 tetapi berfungsi dalam Safari 6. Safari 5 hampir menjadi pelayar mati (0.33%, Ogos 2015).

Kebanyakan isu yang berkaitan dengan saiz fon relatif tidak rumit.

Walau bagaimanapun, jika anda bebas untuk menukar HTML (kebanyakan orang), ini adalah penyelesaian yang munasabah, tetapi saya tidak mengesyorkannya.

---

Sebagai pembangun web yang berpengalaman, inilah cara saya sebenarnya menyelesaikan masalah ini:

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

Ya, itu sahaja. Saya mengalih keluar ruang dalam HTML antara elemen blok sebaris.

Mudah sahaja. ini sangat mudah. Ia berfungsi di mana-mana. Ini adalah penyelesaian pragmatik.

Anda kadangkala perlu berfikir dengan teliti tentang dari mana datangnya ruang kosong. Adakah ruang akan ditambahkan jika saya menambahkan elemen lain menggunakan JavaScript? Tidak, jika anda melakukannya dengan betul.

Mari kita lakukan perjalanan ajaib dan pelajari tentang beberapa cara berbeza untuk mengalih keluar ruang, menggunakan beberapa HTML baharu:

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

• Anda boleh melakukan perkara yang biasa saya lakukan:

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

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

• Atau, lakukan ini:

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

• Sebagai alternatif, gunakan ulasan:

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

• Atau jika anda menggunakan PHP atau sesuatu yang serupa:

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

• Sebagai alternatif, anda boleh meninggalkan tertentu tag penutup sepenuhnya (disokong oleh semua pelayar):

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

Sekarang saya telah membosankan anda dengan "thirtydot's thousand different ways to remove spaces", saya harap anda sudah lupa font-size: 0.