Verilen bu HTML:

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

ve bu CSS:

span { 
    display:inline-block;
    width:100px;
}

sonuç olarak, SPAN unsurları arasında 4px geniş bir boşluk olacak.
Demo:http://jsfiddle.net/dGHFV/

Neden böyle anlıyorum, ve ben de bu yüzden white-space HTML kaynağında SPAN unsurları arasındaki kodu, kaldırarak bu alanı elden alabilirim.

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

Ancak, HTML kaynak kodu ile üzerinde gerektirmeyecek bir CSS çözümü için umuyordum.

Kapsayıcı öğe (paragraf) Metin düğümleri kaldırarak JavaScript ile bu çözmek için nasıl biliyorum, bunun gibi

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

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

Ama bu sorun yalnız CSS ile çözülebilir mi?

Bu cevap oldukça popüler oldu bu yana, önemli ölçüde yeniden düzenliyorum.

İzin istendi asıl soruyu unutmayalım:

Nasıl ınline-block öğeleri arasındaki boşluğu kaldırmak için? Umuyorum HTML kaynak kod olmasını gerektirmez CSS bir çözüm için kurcalamış.Bu sorunu CSS ile çözülmesi yalnız olabilir?

CSS ile bu sorunu tek başına çözmek mümkün, ama yoktamamensağlam CSS düzeltmeleri.

İlk cevabım vardı çözüm ana öğe font-size: 0 ekleyin ve çocuklar üzerinde font-size mantıklı bir ilan etmekti.

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

Bu tüm modern tarayıcıların son sürümlerinde çalışır. IE8 çalışır. Safari 5, ama çalışmıyoryokSafari 6'da çalışmak. Safari 5 ölü bir tarayıcı (0.33%, August 2015) neredeyse.

Göreli yazı tipi boyutları ile olası sorunların çoğunu çözmek için karmaşık değildir.

Bu makul bir çözüm olur ancaközellikle gerekCSS sadece bir düzeltme, HTML değiştirmek için vaktin varsa ben tavsiye etmem çoğumuz gibi).

Bu, oldukça deneyimli bir web geliştiricisi olarak, aslında bu sorunu çözmek için ne

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

Evet, bu doğru. Ben ınline-block unsurları arasındaki HTML boşluk çıkarın.

Çok kolay. Basit. Her yerde çalışıyor. Pragmatik bir çözüm.

Boşluk nereden dikkatlice düşünmeniz gerekiyor bazen.Olur jQuery ile başka bir element boşluk Ekle ekleme?Eğer bunu düzgün yaparsanız hayır, değil.

Hadi farklı şekillerde büyülü bir yolculuğa boşluk kaldırmak için gitmek, bazı yeni HTML ile:

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

• Ben genelde yaptığım gibi yapabilirsiniz:

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

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

• Ya da bu:

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

• Ya da, yorum kullanın:

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

• Veya, you can certain kapatma etiketlerini tamamen (tüm tarayıcılarda bu sorun vardır) atla:

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

Gitti ve seni ölesiye sıkıldım artık "bin farklı şekillerde boşluk, thirtydot tarafından çıkarmak için" font-size: 0 tüm unuttuğun, umarım.