Satır içi / satır içi blok öğeleri arasındaki boşluğu nasıl kaldırabilirim?

Bu HTML ve CSS verildiğinde:

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

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

Sonuç olarak, SPAN öğeleri arasında 4 piksel genişliğinde bir boşluk olacaktır.

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

Bunun neden olduğunu anlıyorum ve HTML kaynak kodundaki SPAN öğeleri arasındaki boşluğu kaldırarak bu alandan kurtulabileceğimi de biliyorum:

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

Ancak, HTML kaynak kodunun kurcalanmasını gerektirmeyen bir CSS çözümü umuyordum.

JavaScript ile bunu çözmek için nasıl biliyorum - metin öğelerini konteyner öğesinden (paragraf) kaldırarak, böylece:

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

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

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

Bu cevap oldukça popüler olduğu için önemli ölçüde yeniden yazıyorum.

Sorulan asıl soruyu unutmayalım:

Satır içi blok öğeleri arasındaki boşluk nasıl kaldırılır ? Kurcalanacak HTML kaynak kodunu gerektirmeyen bir CSS çözümü umuyordum. Bu sorun sadece CSS ile çözülebilir mi?

İse yalnız CSS ile bu sorunu çözmek mümkün, ama hiç orada tamamen sağlam CSS düzeltmeleri.

İlk cevabımda verdiğim çözüm font-size: 0, ebeveyn elemente eklemek ve daha sonra font-sizeçocuklar üzerinde mantıklı bir şekilde beyan etmekti .

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

Bu, tüm modern tarayıcıların son sürümlerinde çalışır. IE8'de çalışır. Safari 5'de çalışmaz , ancak Safari 6'da çalışır. Safari 5 neredeyse ölü bir tarayıcıdır ( 0.33%, Ağustos 2015 ).

Göreli yazı tipi boyutlarıyla ilgili olası sorunların çoğunun düzeltilmesi karmaşık değildir.

Ancak, özellikle yalnızca bir CSS düzeltmesine ihtiyacınız varsa bu makul bir çözüm olsa da , HTML'nizi değiştirmek için özgürseniz (çoğumuz olduğu gibi) tavsiye etmiyorum.

Bu, oldukça deneyimli bir web geliştiricisi olarak aslında bu sorunu çözmek için yaptığım şey:

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

Evet bu doğru. HTML'deki satır içi blok öğeleri arasındaki boşluğu kaldırırım.

Bu kolay. Basit. Her yerde çalışır. Bu pragmatik çözüm.

Bazen boşlukların nereden geleceğini dikkatle düşünmelisiniz. JavaScript ile başka bir öğe eklemek boşluk ekler mi?Hayır, düzgün yaparsanız değil.

Bazı yeni HTML ile boşlukları kaldırmak için farklı yollarla büyülü bir yolculuğa çıkalım:

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

• Bunu genellikle yaptığım gibi yapabilirsiniz:

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

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

• Veya bu:

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

• Veya yorumları kullanın:

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

• Veya PHP veya benzeri bir bilgisayar kullanıyorsanız:

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

• Veya, şunları yapabilirsiniz hatta atlamak belli (tüm tarayıcılar ile bu iyidir) tamamen kapatma etiketleri:

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

Şimdi gittim ve seni "beyaz boşluğu kaldırmak için bin farklı yolla, otuzdot" ile ölüme sıktım, umarım hepsini unuttun font-size: 0.

Alternatif olarak, daha önce için satır içi blok kullandığınız düzenlerin çoğuna ulaşmak için flexbox'ı kullanabilirsiniz : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS3 uyumlu tarayıcılar için white-space-collapsing:discard

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

DÜZENLE:

bugün sadece Flexbox kullanmalıyız .

ESKİ CEVAP:

Her ikisi upvoted ettik rağmen Tamam, font-size: 0;ve not implemented CSS3 featurecevapları, denedikten sonra ben öğrendim bunların hiçbiri gerçek çözümdür .

Aslında, güçlü yan etkileri olmayan bir çözüm bile yoktur.

Sonra kaynak ( ) inline-blockdivs arasındaki boşlukları (bu cevaplar bu argüman hakkında) kaldırmaya karar verdi , bunu çevirerek:HTMLJSP

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

buna

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

bu çirkin, ama çalışıyor.

Ama bir dakika ... ya benim divlerimi içeride üretirsem Taglibs loops ( Struts2,JSTL vb ...)?

Örneğin:

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

Tüm bu şeyleri satır içi yapmak kesinlikle düşünülemez,

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

okunabilir, bakımı zor ve anlaşılması zor, vb ...

Bulduğum çözüm:

bir div'in sonunu diğerinin başına bağlamak için HTML yorumlarını kullanın!

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

Bu şekilde okunabilir ve doğru girintili bir koda sahip olursunuz.

Ve olumlu bir yan etki olarak, HTML source boş yorumlar tarafından istila edilmiş olsa , doğru girintili sonuçlanacaktır;

ilk örneği ele alalım. Benim düşünceme göre, bu:

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

bundan daha iyidir:

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

Boşluk OLMAMASI için öğeler arasına yorumlar ekleyin . Benim için yazı tipi boyutunu sıfırlamak ve sonra geri ayarlamaktan daha kolay.

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

Tüm alan eleme teknikleri display:inline-blockkötü kesmek ...

Flexbox kullanın

Harika, tüm bu satır içi blok düzeni bs çözer ve 2017 itibariyle % 98 tarayıcı desteği (eski IE'leri umursamıyorsanız daha fazla).

• Flexbox'ı Kullanmaya Hazır Mıyız?
• CSS esnek kutularını kullanma - Web geliştirici kılavuzu | MDN
• Flexbox için Tam Bir Kılavuz | CSS-Tricks
• Flexy Boxes - CSS flexbox oyun alanı ve kod oluşturma aracı

display: flex;Üst öğeye ekleyin . İşte bir önek ile çözüm:

Basitleştirilmiş sürüm 👇

p {
  display: flex;
}

span {
  width: 100px;
  background: tomato;
  font-size: 30px;
  color: white;
  text-align: center;
}

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

İx öneki ile düzelt

p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: blue;
  font-size: 30px;
  color: white;
  text-align: center;
}

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

Bu konuyla ilgili verdiğim cevapla aynı: Ekran: Satır içi blok - Bu alan nedir?

Aslında boşlukları satır içi bloktan hem kolay hem de anlamsal olarak kaldırmanın gerçekten basit bir yolu var. Sıfır genişlikli boşluklara sahip özel bir yazı tipi olarak adlandırılır, bu da çok küçük bir yazı tipi kullanarak boşluk alanını (satır içi öğeler için tarayıcı tarafından ayrı satırlarda olduklarında eklenir) daraltmanıza olanak tanır. Yazı tipini bildirdikten sonra, sadece font-familykapta ve tekrar çocuklarda ve voila'yı değiştirirsiniz. Bunun gibi:

@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;
}

Tatmak için uygun. Font-forge'de pişirdiğim ve FontSquirrel webfont jeneratörü ile dönüştürdüğüm yazı tipine bir indirme. 5 dakikamı aldı. Css @font-facebildirimi dahildir: sıkıştırılmış sıfır genişlikli boşluk yazı tipi . Google Drive'dadır, bu nedenle bilgisayarınıza kaydetmek için Dosya> İndir'i tıklamanız gerekir. Bildirimi ana css dosyanıza kopyalarsanız, yazı tipi yollarını da değiştirmeniz gerekecektir.

CSS Metin Modülü Düzey 3'e dayalı iki seçenek daha (bunun yerine white-space-collapsing:discardteknik özellik taslağından çıkarılmış):

• word-spacing: -100%;

Teoride, tam olarak gerekli olanı yapmalıdır - 'kelimeler' arasındaki boşlukları boşluk karakteri genişliğinin% 100'ü kadar, yani sıfıra kısaltın. Ancak maalesef hiçbir yerde çalışmıyor gibi görünüyor ve bu özellik 'risk altında' olarak işaretlenmiş (spesifikasyondan da çıkarılabilir).

• word-spacing: -1ch;

Sözcüklerarası boşlukları '0' rakamının genişliği ile kısaltır. Tek aralıklı bir fontta, boşluk karakterinin (ve diğer karakterlerin) genişliğine tam olarak eşit olmalıdır. Bu, Firefox 10+, Chrome 27+ ve neredeyse Internet Explorer 9+ ile çalışır.

Vaktini boşa harcamak

Ne yazık ki, 2019 ve white-space-collapsehala uygulanmadı.

Bu arada, üst öğe vermek font-size: 0;ve set font-sizeçocuklar üzerinde. Bu hile yapmalı

Flexbox kullanın ve eski tarayıcılar için (yukarıdaki önerilerden) bir geri dönüş yapın:

ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

Basit:

item {
  display: inline-block;
  margin-right: -0.25em;
}

Üst öğeye dokunmaya gerek yoktur.

Buradaki tek koşul: öğenin yazı tipi boyutu tanımlanmamalıdır (ebeveynin yazı tipi boyutuna eşit olmalıdır).

0.25em varsayılan word-spacing

W3Schools - kelime aralığı özelliği

yazı tipi boyutu: 0; yönetmek biraz daha zor olabilir ...

Aşağıdaki çift hatların diğer yöntemlerden çok daha iyi ve daha kullanılabilir ve zaman tasarrufu olduğunu düşünüyorum. Şahsen bunu kullanıyorum:

.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

Sonra aşağıdaki gibi kullanabilirsiniz ...

<ul class="items">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Bildiğim kadarıyla (yanlış olabilirim) ancak tüm tarayıcılar bu yöntemi destekliyor.

AÇIKLAMA :

Bu, (belki -3px daha iyi olabilir) tam olarak çalışmasını beklediğiniz gibi çalışır.

• kodu kopyalayıp yapıştırırsınız (bir kez)
• sonra html'nizde class="items"her satır içi bloğun üst kısmında kullanın .

Yeni satır içi bloklarınız için css'e geri dönmeniz ve başka bir css kuralı eklemeniz gerekmeyecek.

İki sorunu aynı anda çözme.

Ayrıca >(işaretten daha büyük) bunun * / tüm çocukların satır içi blok olması gerektiği anlamına geldiğine dikkat edin .

http://jsfiddle.net/fD5u3/

NOT: Bir sarıcı alt sarıcı olduğunda harf aralığını devralacak şekilde değiştirdim.

Yine de, teknik olarak şu soruya bir cevap değil: "Satır içi blok öğeleri arasındaki boşluğu nasıl kaldırabilirim?"

Flexbox çözümünü deneyebilir ve aşağıdaki kodu uygulayabilirsiniz; boşluk kaldırılır.

p {
   display: flex;
   flex-direction: row;
}

Bununla ilgili daha fazla bilgiyi şu bağlantıda bulabilirsiniz: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Boşluk olmadan iki mavi açıklık yapmak veya diğer beyaz boşlukları işlemek istiyorsanız, ancak boşluğu kaldırmak istiyorsanız emin değilim:

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;

    float: left;
}

Ve bitti.

Genellikle böyle satırları farklı satırlarda kullanırız, ancak display:inline-blockaynı satırda etiket kullanılması durumunda boşluk kaldırılır, ancak farklı bir satırda kullanılmaz.

Etiketleri farklı bir satırda içeren bir örnek:

p span {
  display: inline-block;
  background: red;
}

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

Aynı satırdaki etiketlere sahip örnek

p span {
  display: inline-block;
  background: red;
}

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

Başka bir etkili yöntem, font-size:0üst öğeye kullanılan ve font-sizealt öğeye istediğiniz kadar veren bir CSS işidir .

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}

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

Yukarıdaki yöntemler, tüm uygulamaya bağlı olarak bir yerde çalışmayabilir, ancak son yöntem bu durum için kusursuz bir çözümdür ve her yerde kullanılabilir.

Şu anda ve bu problemi yaşadım font-size:0; yaşadım ve Internet Explorer 7'de Internet Explorer'ın "Yazı Tipi Boyutu 0?!?! WTF siz deli misiniz?" Diye düşündüğü için sorunun devam ettiğini gördüm. - Yani, benim durumumda Eric Meyer CSS sıfırladım ve font-size:0.01em;Internet Explorer 7'den Firefox 9'a 1 piksel farkım var, bu yüzden bunun bir çözüm olabileceğini düşünüyorum.

Bu son zamanlarda mücadele ettik ve ebeveyn ayarlamak ve font-size:0daha sonra çocuğu makul bir değere geri ayarlamak yerine, ana konteyner letter-spacing:-.25emsonra çocuk geri ayarlayarak tutarlı sonuçlar alıyorum letter-spacing:normal.

Alternatif bir iş parçacığında font-size:0, her zaman ideal olmayan bir yorumcu gördüm , çünkü insanlar tarayıcılarında minimum yazı tipi boyutlarını kontrol edebilir ve yazı tipi boyutunu sıfıra ayarlama olasılığını tamamen ortadan kaldırabilir.

EMS kullanılması, belirtilen yazı tipi boyutunun% 100, 15pt veya 36px olup olmadığına bakılmaksızın çalışıyor gibi görünüyor.

http://cdpn.io/dKIjo

Ben IE 6/7 bile tüm tarayıcılar tarafından desteklenen bunun için çok basit / eski bir yöntem olduğunu düşünüyorum. Biz sadece ayarlayabilirsiniz letter-spacingebeveyn büyük bir negatif değere ve sonra geri ayarlayın normalalt öğeleri de:

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */

<p style="color:red">Wrong (default spacing):</p>

<div class="">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

<hr/>

<p style="color:green">Correct (no-spacing):</p>

<div class="no-spacing">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

Bu sorunun en basit cevabı eklemektir.

css

float: left;

kod bağlantısı: http://jsfiddle.net/dGHFV/3560/

PHP parantezleri ile:

ul li {
  display: inline-block;
}

    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>

Burada diğer çözümlerin çok karmaşık / çok fazla çalışma olduğuna inanıyorum çünkü user5609829'un cevabını biraz genişleteceğim. margin-right: -4pxSatır içi blok öğelerine a uygulandığında boşluk kaldırılır ve tüm tarayıcılar tarafından desteklenir. Güncellenmiş kemanı buradan görebilirsiniz . Negatif kenar boşlukları kullanmakla ilgilenenler için bunu bir okumaya çalışın .

CSS Yazı Modülü Seviye 4 şartname tanımlar atext-space-collapse beyaz boşluk nasıl içini ve çevresinde bir eleman işlenir kontrol etmesine izin özelliği.

Yani, örneğinizle ilgili olarak, şunu yazmanız gerekir:

p {
  text-space-collapse: discard;
}

Ne yazık ki, HBP'nin cevabına yapılan yorumlarda belirtildiği gibi bu özelliği henüz (Eylül 2016 itibariyle) uygulamıyor .

Tüm tarayıcılarda benim için çok iyi çalışan saf bir CSS çözümü buldum:

span {
    display: table-cell;
}

Ekle white-space: nowrapKapsayıcı öğesine :

CSS:

* {
    box-sizing: border-box;
}
.row {
    vertical-align: top;
    white-space: nowrap;
}
.column{
    float: left;
    display: inline-block;
    width: 50% // Or whatever in your case
}

HTML:

<div class="row">
    <div class="column"> Some stuff</div>
    <div class="column">Some other stuff</div>
</div>

İşte Plunker .

Gibi pek çok çözüm vardır font-size:0, word-spacing, margin-left, letter-spacingvb.

Normalde kullanmayı tercih ederim letter-spacingçünkü

1. ekstra alan genişliğinden daha büyük bir değer atadığımızda sorun yok (örn. -1em).
2. Ancak, sorun olmayacak word-spacingve margin-leftdaha büyük bir değer ayarladığımızda-1em .
3. Birim olarak font-sizekullanmaya çalıştığımızda kullanmak uygun değildir .emfont-size

Yani, letter-spacingen iyi seçim gibi görünüyor.

Ancak, seni uyarmalıyım

kullandığınız zaman başkalarını letter-spacingkullanmanız -0.3emveya kullanmamanız daha iyi olur -0.31em.

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
  cursor: auto;
}
.nav {
  width: 260px;
  height: 100px;
  background-color: pink;
  color: white;
  font-size: 20px;
  letter-spacing: -1em;
}
.nav__text {
  width: 90px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid black;
  line-height: 40px;
  background-color: yellowgreen;
  text-align: center;
  display: inline-block;
  letter-spacing: normal;
}

<nav class="nav">
    <span class="nav__text">nav1</span>
    <span class="nav__text">nav2</span>
    <span class="nav__text">nav3</span>
</nav>

Chrome (test sürümü 66.0.3359.139) veya Opera (test sürümü 53.0.2907.99) kullanıyorsanız, gördüğünüz şey şunlar olabilir:

Firefox (60.0.2), IE10 veya Edge kullanıyorsanız, gördüğünüz şey şunlar olabilir:

İlginç. Yani, mdn-harf aralığını kontrol ettim ve buldum:

uzunluk

Karakterler arasındaki varsayılan boşluğa ek olarak ekstra karakterler arası boşluk belirtir. Değerler negatif olabilir, ancak uygulamaya özgü sınırlamalar olabilir. Kullanıcı aracıları metni yaslamak için karakterler arası boşluğu daha fazla artıramaz veya azaltamaz.

Öyle görünüyor.

Ekle letter-spacing:-4px;ebeveyn üzerinde pcss ve eklemek letter-spacing:0px;için için spancss.

span {
  display:inline-block;
  width:100px;
  background-color:palevioletred;
  vertical-align:bottom;
  letter-spacing:0px;
}

p {
  letter-spacing:-4px;
}

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

Bu soruya yeni bir şeyler ekleyeceğimi düşündüm, çünkü şu anda verilen cevapların çoğu yeterli ve alakalı olmaktan çok daha fazla olsa da, tüm tarayıcılarda tam destek ile çok temiz bir çıktı elde edebilecek bazı yeni CSS özellikleri var ve 'hack' yok. Bu durumdan uzaklaşır, inline-blockancak sorulan soru ile aynı sonuçları verir.

Bu CSS özellikleri grid

CSS Izgara, çalışmak için izin vermek için yalnızca bir önek gerektiren IE dışında yüksek oranda desteklenir ( CanIUse ) -ms-.

CSS Izgara aynı zamanda son derece esnektir ve tüm iyi parçaları alır table, flexve inline-blockelemanları ve tek bir yerde onları getiriyor.

A oluştururken gridsatırlar ve sütunlar arasındaki boşlukları belirleyebilirsiniz. Varsayılan boşluk zaten olarak ayarlanmış0px ancak bu değeri istediğiniz gibi değiştirebilirsiniz.

Biraz kısa kesmek için, ilgili bir çalışma örneği vardır:

body {
  background: lightblue;
  font-family: sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-column-gap: 0; /* Not needed but useful for example */
  grid-row-gap: 0; /* Not needed but useful for example */
}

.box {
  background: red;
}
.box:nth-child(even) {
  background: green;
}

<div class="container">
  <div class="box">
    Hello
  </div>
  <div class="box">
    Test
  </div>  
</div>

Bulduğum bir başka yol da, satırın ilk öğesi hariç, sol kenar boşluğunu negatif değerler olarak uygulamaktır.

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}

inline-blockS arasındaki boşluğu kaldırmaya çalışan her soru <table>bana benziyor ...

Bunun gibi bir şey deneyin:

p {
  display: table;
}
span {
  width: 100px;
  border: 1px solid silver; /* added for visualization only*/
  display: table-cell;
}

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