Jak usunąć odstęp między elementami inline / inline-block?

Biorąc pod uwagę ten HTML i CSS:

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

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

W rezultacie między elementami SPAN będzie występować szerokość 4 pikseli.

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

Rozumiem, dlaczego tak się dzieje, a także wiem, że mogłem pozbyć się tego miejsca, usuwając białe spacje między elementami SPAN w kodzie źródłowym HTML:

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

Miałem jednak nadzieję na rozwiązanie CSS, które nie wymaga manipulacji kodem źródłowym HTML.

Wiem, jak to rozwiązać za pomocą JavaScript - usuwając węzły tekstowe z elementu kontenera (akapitu), tak:

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

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

Ale czy ten problem można rozwiązać za pomocą samego CSS?

Ponieważ ta odpowiedź stała się dość popularna, znacznie ją przepisuję.

Nie zapominajmy o samym pytaniu:

Jak usunąć odstęp między elementami bloku wbudowanego ? Miałem nadzieję na rozwiązanie CSS, które nie wymaga manipulacji kodem źródłowym HTML. Czy ten problem można rozwiązać za pomocą samego CSS?

Możliwe jest rozwiązanie tego problemu za pomocą samego CSS, ale nie ma całkowicie niezawodnych poprawek CSS.

Rozwiązaniem, które miałem w mojej początkowej odpowiedzi było dodanie font-size: 0do elementu nadrzędnego, a następnie zadeklarowanie sensowności font-sizedla dzieci.

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

Działa to w najnowszych wersjach wszystkich nowoczesnych przeglądarek. Działa w IE8. To nie działa w Safari 5, ale to nie praca w Safari 6. Safari 5 jest prawie martwy przeglądarka ( 0,33%, sierpień 2015 ).

Większość możliwych problemów z względnymi rozmiarami czcionek nie jest skomplikowana do rozwiązania.

Chociaż jest to rozsądne rozwiązanie, jeśli potrzebujesz tylko poprawki CSS, nie jest to zalecane, jeśli możesz swobodnie zmieniać kod HTML (jak większość z nas).

Oto, co właściwie jako doświadczony programista stron internetowych rozwiązuję ten problem:

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

Tak to prawda. Usuwam spacje w HTML między elementami bloku wstawianego.

To jest łatwe. To proste. Działa wszędzie. To pragmatyczne rozwiązanie.

Czasem trzeba dokładnie zastanowić się, skąd się bierze biała spacja. Czy dodanie kolejnego elementu z JavaScript doda białe spacje? Nie, jeśli zrobisz to poprawnie.

Udajmy się w magiczną podróż na różne sposoby, aby usunąć białe znaki, z nowym kodem HTML:

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

• Możesz to zrobić, jak zwykle:

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

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

• Albo to:

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

• Lub użyj komentarzy:

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

• Lub, jeśli używasz PHP lub podobnego:

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

• Lub możesz nawet całkowicie pominąć niektóre znaczniki zamykające (wszystkie przeglądarki mają się dobrze):

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

Teraz, gdy odszedłem i nudziłem cię na śmierć „tysiącem różnych sposobów na usunięcie białych znaków do trzydziestu kropek”, mam nadzieję, że o wszystkim zapomniałeś font-size: 0.

Alternatywnie, możesz teraz użyć Flexboksa, aby uzyskać wiele układów, które wcześniej używałeś wbudowanego bloku dla: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Dostępne są przeglądarki zgodne z CSS3 white-space-collapsing:discard

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

EDYTOWAĆ:

dziś powinniśmy po prostu korzystać z Flexboksa .

STARA ODPOWIEDŹ:

OK, chociaż głosowałem zarówno na pytania, jak font-size: 0;i not implemented CSS3 featureodpowiedzi, po wypróbowaniu dowiedziałem się, że żadne z nich nie jest prawdziwym rozwiązaniem .

W rzeczywistości nie ma nawet jednego obejścia bez silnych efektów ubocznych.

Następnie postanowiłem usunąć spacje (ta odpowiedź dotyczy tego argumentu) między inline-blockdivami z mojego HTMLźródła ( JSP), obracając to:

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

do tego

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

to brzydkie, ale działa.

Ale chwileczkę ... co jeśli jestem generowania moje div wewnątrz Taglibs loops( Struts2, JSTLitp ...)?

Na przykład:

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

Oznaczałoby to, że nie można tego wszystkiego wsadzić

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

nieczytelne, trudne do utrzymania i zrozumienia itp.

Rozwiązanie, które znalazłem:

użyj komentarzy HTML, aby połączyć koniec jednego div z początkiem następnego!

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

W ten sposób będziesz mieć czytelny i poprawnie wcięty kod.

I, jako pozytywny efekt uboczny, HTML sourcechoć zaatakowane pustymi komentarzami, spowodują prawidłowe wcięcie;

weźmy pierwszy przykład. Moim skromnym zdaniem to:

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

jest lepszy niż to:

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

Dodawaj komentarze między elementami, aby NIE miały spacji. Dla mnie jest to łatwiejsze niż resetowanie rozmiaru czcionki do zera, a następnie ustawienie go z powrotem.

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

Wszystkie techniki eliminacji przestrzeni display:inline-blockto paskudne włamania ...

Użyj Flexbox

Jest niesamowity, rozwiązuje wszystkie te układy bloków wbudowanych, a od 2017 roku obsługuje 98% przeglądarek (więcej, jeśli nie obchodzi cię stare IE).

• Czy jesteśmy gotowi do korzystania z Flexbox?
• Korzystanie z elastycznych skrzynek CSS - przewodnik dla twórców stron internetowych | MDN
• Kompletny przewodnik po Flexbox | Sztuczki CSS
• Flexy Boxes - CSS Flexbox boisko i narzędzie do generowania kodu

Dodaj display: flex;do elementu nadrzędnego. Oto rozwiązanie z prefiksem:

Wersja uproszczona 👇

p {
  display: flex;
}

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

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

Napraw z prefiksem 👇

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>

To jest ta sama odpowiedź, którą podałem w pokrewnej treści: Wyświetlanie: Blok wbudowany - co to za przestrzeń?

Jest naprawdę bardzo prosty sposób na usunięcie białych znaków z bloku wbudowanego, który jest łatwy i semantyczny. Nazywa się to czcionką niestandardową ze spacjami o zerowej szerokości, co pozwala zwinąć białe znaki (dodane przez przeglądarkę dla elementów wstawianych, gdy znajdują się w osobnych wierszach) na poziomie czcionki przy użyciu bardzo małej czcionki. Kiedy zadeklarujesz czcionkę, po prostu zmienisz font-familyna pojemniku i ponownie na dzieciach i voila. Lubię to:

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

Dopasuj do smaku. Oto pobranie czcionki, którą właśnie przygotowałem w font-forge i przekonwertowałem za pomocą generatora czcionek FontSquirrel. Zajęło mi to całe 5 minut. @font-faceDeklaracja css jest dołączona: spakowana czcionka spacji o zerowej szerokości . Jest na Dysku Google, dlatego musisz kliknąć Plik> Pobierz, aby zapisać go na komputerze. Prawdopodobnie konieczna będzie również zmiana ścieżek czcionek, jeśli skopiujesz deklarację do głównego pliku css.

Dwie kolejne opcje oparte na module tekstowym CSS poziom 3 (zamiast tego, white-space-collapsing:discardktóry został usunięty z wersji specyfikacji):

• word-spacing: -100%;

Teoretycznie powinien robić dokładnie to, co jest potrzebne - skracać białe spacje między „słowami” o 100% szerokości znaku spacji, tj. Do zera. Ale wydaje się, że nigdzie nie działa, a ta funkcja jest oznaczona jako „zagrożona” (można ją również usunąć ze specyfikacji).

• word-spacing: -1ch;

Skraca odstępy między wyrazami o szerokość cyfry „0”. W czcionce monospace powinna być dokładnie równa szerokości znaku spacji (i każdego innego znaku). Działa to w Firefox 10+, Chrome 27+ i prawie działa w Internet Explorerze 9+.

Skrzypce

Niestety jest to rok 2019 i white-space-collapsenadal nie jest zaimplementowany.

W międzyczasie podaj element nadrzędny font-size: 0;i ustaw font-sizeelementy podrzędne. To powinno załatwić sprawę

Użyj Flexboksa i zrób rezerwę (na podstawie powyższych sugestii) dla starszych przeglądarek:

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

Prosty:

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

Nie ma potrzeby dotykania elementu nadrzędnego.

Tutaj tylko warunek: rozmiar czcionki elementu nie może być zdefiniowany (musi być równy rozmiarowi czcionki rodzica).

0.25em jest wartością domyślną word-spacing

W3Schools - właściwość odstępów między wyrazami

rozmiar czcionki: 0; może być nieco trudniejszy w zarządzaniu ...

Myślę, że następujące kilka wierszy jest o wiele lepsze i bardziej przydatne do ponownego użycia, i oszczędza czas niż jakiekolwiek inne metody. Ja osobiście korzystam z tego:

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

Następnie możesz użyć go w następujący sposób ...

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

O ile wiem (mogę się mylić), ale wszystkie przeglądarki obsługują tę metodę.

OBJAŚNIENIE :

To działa (być może -3px może być lepsze) dokładnie tak, jak można się spodziewać.

• skopiujesz i wkleisz kod (raz)
• następnie na html po prostu użyj class="items"elementu nadrzędnego każdego bloku wbudowanego.

NIE będziesz musiał wracać do css i dodawać kolejnej reguły css dla swoich nowych wbudowanych bloków.

Rozwiązywanie dwóch problemów jednocześnie.

Zwróć także uwagę na >(większy niż znak), co oznacza, że ​​* / wszystkie dzieci powinny mieć blok wstawiany.

http://jsfiddle.net/fD5u3/

UWAGA: Zmodyfikowałem, aby uwzględnić dziedziczenie odstępów między literami, gdy opakowanie ma opakowanie potomne.

Chociaż technicznie nie jest to odpowiedź na pytanie: „Jak usunąć odstęp między elementami bloku wbudowanego?”

Możesz wypróbować rozwiązanie Flexbox i zastosować poniższy kod, a miejsce zostanie usunięte.

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

Możesz dowiedzieć się więcej na ten temat pod tym linkiem: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Nie jestem całkiem pewien, czy chcesz zrobić dwa niebieskie przęsła bez odstępu, czy też chcesz obsłużyć inne białe spacje, ale jeśli chcesz usunąć odstęp:

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

    float: left;
}

I zrobione.

Zasadniczo takich elementów używamy w różnych liniach, ale w przypadku display:inline-blockużycia tagów w tej samej linii usuniesz spację, ale w innej linii nie.

Przykład z tagami w innej linii:

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

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

Przykład ze znacznikami w tej samej linii

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

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

Inną skuteczną metodą jest zadanie CSS, które wykorzystuje font-size:0element nadrzędny i daje font-sizeelementowi podrzędnemu tyle, ile chcesz.

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

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

Powyższe metody mogą nie działać gdzieś w zależności od całej aplikacji, ale ostatnia metoda jest niezawodnym rozwiązaniem dla tej sytuacji i może być używana w dowolnym miejscu.

Miałem teraz ten problem i font-size:0;odkryłem, że w Internet Explorerze 7 problem pozostaje, ponieważ Internet Explorer myśli „Rozmiar czcionki 0?!?! WTF, czy jesteś szalony?” - Więc w moim przypadku Eric CS Meyer zresetował się i font-size:0.01em;mam różnicę 1 piksela od Internet Explorera 7 do Firefoksa 9, więc myślę, że to może być rozwiązanie.

Ostatnio zmierzyłem się z tym i zamiast ustawić rodzica, font-size:0a następnie ustawić dziecko z powrotem na rozsądną wartość, uzyskuję spójne wyniki, ustawiając pojemnik nadrzędny, letter-spacing:-.25ema następnie dziecko z powrotem letter-spacing:normal.

W alternatywnym wątku zauważyłem komentarz komentatora, który font-size:0nie zawsze jest idealny, ponieważ ludzie mogą kontrolować minimalne rozmiary czcionek w swoich przeglądarkach, całkowicie negując możliwość ustawienia rozmiaru czcionki na zero.

Korzystanie z ems wydaje się działać niezależnie od tego, czy określony rozmiar czcionki to 100%, 15 punktów lub 36 pikseli.

http://cdpn.io/dKIjo

Myślę, że istnieje bardzo prosta / stara metoda, która jest obsługiwana przez wszystkie przeglądarki, nawet IE 6/7. Możemy po prostu ustawić letter-spacingdużą wartość ujemną w obiekcie nadrzędnym, a następnie ustawić ją z powrotem normalw elementach potomnych:

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>

Najprostszą odpowiedzią na to pytanie jest dodanie.

css

float: left;

link codepen: http://jsfiddle.net/dGHFV/3560/

Ze wspornikami PHP:

ul li {
  display: inline-block;
}

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

Mam zamiar rozwinąć nieco odpowiedź user5609829, ponieważ uważam, że inne rozwiązania tutaj są zbyt skomplikowane / zbyt dużo pracy. Zastosowanie elementów margin-right: -4pxdo wbudowanych bloków usunie odstępy i jest obsługiwane przez wszystkie przeglądarki. Zobacz zaktualizowane skrzypce tutaj . Dla zainteresowanych z wykorzystaniem marże negatywne, spróbuj dając tym poczytać.

Specyfikacja poziomu 4 modułu tekstowego CSS definiuje atext-space-collapse właściwość, która pozwala kontrolować, w jaki sposób przetwarzana jest biała przestrzeń wewnątrz i wokół elementu.

Tak więc, jeśli chodzi o twój przykład, musisz po prostu napisać to:

p {
  text-space-collapse: discard;
}

Niestety żadna przeglądarka nie implementuje jeszcze tej właściwości (od września 2016 r.), Jak wspomniano w komentarzach do odpowiedzi HBP .

Znalazłem czyste rozwiązanie CSS, które działało dla mnie bardzo dobrze we wszystkich przeglądarkach:

span {
    display: table-cell;
}

Dodaj white-space: nowrapdo elementu kontenera:

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>

Oto plunker .

Istnieje wiele rozwiązań, takich jak font-size:0, word-spacing, margin-left, letter-spacingi tak dalej.

Zwykle wolę używać, letter-spacingponieważ

1. wydaje się to w porządku, gdy przypisujemy wartość większą niż szerokość dodatkowego miejsca (np -1em.).
2. Jednak nie będzie to w porządku word-spacingi margin-leftkiedy ustawimy większą wartość jak -1em.
3. Używanie font-sizenie jest wygodne, gdy próbujemy użyć emjako font-sizejednostki.

Tak więc, letter-spacingwydaje się być najlepszym wyborem.

Jednak muszę cię ostrzec

kiedy używasz letter-spacing, lepiej korzystaj z innych -0.3emlub -0.31emnie.

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

Jeśli używasz Chrome (wersja testowa 66.0.3359.139) lub Opera (wersja testowa 53.0.2907.99), możesz zobaczyć:

Jeśli używasz przeglądarki Firefox (60.0.2), IE10 lub Edge, możesz zobaczyć:

To interesujące. Sprawdziłem więc odstępy między literami mdn i znalazłem to:

długość

Określa dodatkową przestrzeń między znakami oprócz domyślnej przestrzeni między znakami. Wartości mogą być ujemne, ale mogą istnieć limity specyficzne dla implementacji. Aplikacje klienckie nie mogą dalej zwiększać ani zmniejszać przestrzeni między znakami w celu uzasadnienia tekstu.

Wydaje się, że to jest powód.

Dodaj letter-spacing:-4px;nadrzędny pcss i dodaj letter-spacing:0px;do swojego 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>

Pomyślałem, że dodam coś nowego do tego pytania, ponieważ chociaż wiele obecnie podanych odpowiedzi jest więcej niż adekwatnych i trafnych, istnieją pewne nowe właściwości CSS, które mogą osiągnąć bardzo czysty wynik, z pełną obsługą wszystkich przeglądarek i niewiele żadnych „hacków”. Odsuwa się inline-blockto, ale daje takie same wyniki jak zadane pytanie.

Te właściwości CSS to grid

CSS Grid jest wysoce obsługiwany ( CanIUse ) oprócz IE, który potrzebuje tylko-ms- prefiksu, aby mógł działać.

CSS Siatka jest bardzo elastyczna i ma wszystkie dobre części z table, flexoraz inline-blockelementy i przynosi je w jednym miejscu.

Podczas tworzenia gridmożesz określić odstępy między wierszami i kolumnami. Domyślna przerwa jest już ustawiona na, 0pxale możesz zmienić tę wartość na dowolną.

Krótko mówiąc, oto odpowiedni przykład działania:

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>

Innym sposobem, jaki znalazłem, jest zastosowanie marginesu po lewej jako wartości ujemnych, z wyjątkiem pierwszego elementu wiersza.

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

Każde pytanie, które próbuje usunąć przestrzeń między inline-blocks, wydaje <table>mi się ...

Wypróbuj coś takiego:

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>