Jak pozbyć się odstępu/spacji pomiędzy elementami inline-block?

Problem - odstęp/spacja pomiędzy elementami z display: inline-block

Załóżmy, że przy tworzeniu nawigacji dla swojej strony zdecydowałeś się skorzystać z korzyści jakie daje display: inline-block.

O jakich korzyściach inline-block mówię?

Elementy układają się obok siebie, w jednej lini (przewaga nad display: block).
Elementom można nadać szerokość i wysokość (przewaga nad display: inline).
Elementy można w prosty sposób wyśrodkować w poziomie dzięki ustawieniu ich rodzicowi text-align: center.

Zatem zobaczmy co nam z tego wyszło:

Ogólnie wygląda to całkiem nieźle, jednak wcale nie planowałem odstępu pomiędzy "guzikami". Nigdzie w kodzie CSS nie wymusiłem odstępu w postaci chociażby marginesu.

Skąd zatem wziął się nasz niechciany odstęp?

Otóż wynika on z natury display: inline, bo przecież nasz dispaly: inline-block jest hybrydą inline oraz block. Akurat w kwestii naszego niechcianego odstępu - ujawniła nam się cecha pochodząca od inline.

Czyli nic się nie da zrobić, tak już jest i musimy się z tym pogodzić?

Spokojnie, wysztko się da! Jeszcze nie doszliśmy do sedna sprawy, czyli w jakich warunkach ta cecha inline się ujawnia?

Inline jest trybem stworzonym z myślą o tekście. Jeżeli w tekście pojawia się spacja to... oczywiście widzisz niewielki odstęp na ekranie pomiędzy słowami.

Link z naszego przykładu czyli <a href="">Start</a> ma ustawiony display: inline-block, czyli po części jest traktowany przez przeglądarkę jako tekst.

Ważne żebyś zrozumiał, że nie chodzi mi o to, że słowo Start jest traktowane jako tekst - to jest jasna sprawa. Chodzi mi o cały element HTML <a></a>.

Zatem jeśli pomiędzy jednym elementem <a></a> a drugim elementem <a></a> pojawi się spacja w kodzie HTML, to na ekranie również pojawi się spacja.

No dobra, zatem prześledźmy nasz kod HTML w poszukiwaniu spacji pomiędzy linkami - czegoś w stylu <a>...</a> <a></a>.

Efekt?

Nie ma żadnej spacji! Wniosek? Mój przydługi wywód był bezsensu ;).

Na szczęście nie! :)

Co prawda nie ma spacji, ale jest "niewidzialny" znak nowej linii pomiędzy linkami (popularnie zwany "enterem").

Bo przecież nasz kod nie wygląda tak:

<a>...</a><a>...</a>

tylko tak:

<a>...</a>
<a>...</a>

Zapewne wiesz o tym, że przeglądarka wyświetli na ekranie "nową linię" jeśli użyjesz znacznika <br>. Jeśli użyjesz tylko "entera" w kodzie HTML, to przeglądarka go potraktuje jako spację, a nie nową linię.

Z resztą nie musisz mi wierzyć na słowo, o to dowód:

Dokładnie to samo się dzieje z naszą nawigacją. "Entery" odzielające linki w kodzie HTML, są wyświetlane jako spacje przez przeglądarkę.

Zatem wystarczy się pozbyć enterów z kodu HTML i wszystko powinno działać.

Do dzieła!

Rozwiązanie

Podejście pierwsze

Zacznijmy od dosłownie pozbycia się "enterów" z naszego kodu:

Udało się!

Jednak jest jeden minus tego rozwiązania. Spójrz jak wygląda nasz kod HTML... Niezbyt czytelny.

Wolałbym jednak poszukać innego rozwiązania, które będzie wolne od tej wady. Przecież czytelny kod to bardzo ważna kwestia w codziennej pracy programisty.

Podejście drugie

W drugim sposobie wykorzystamy sprytny fortel, a mianowicie zmniejszymy rozmiar czcionki dla naszych "enterów" do rozmiaru niewidocznego czyli font-size: 0;, a tekst na którym nam zależy ustawimy na font-size: 16px;.

Świetnie! Udało nam się upiec dwie pieczenie na jednym ogniu!

Oczywiście są jeszcze inne rozwiązania.

Moglibyśmy na przykład użyć flexboxa, co z resztą w kwestii naszej nawigacji miałoby wiele zalet.

Moglibyśmy równie dobrze użyć display: block w połączeniu z float: left, pogimnastykować się trochę z wyśrodkowaniem i też by dało radę.

Jednak celem niniejszego artykułu nie było znalezienie najlepszego sposobu na stworzenie nawigacjii na stronie internetowej.

Chodziło o rozwiązanie konkretnego problemu, którym w tym przypadku był niechciany odstęp pomiędzy elementami z display: inline-block.

Jeśli natkniesz się na ten problem, a z pewnością nadejdzie taki dzień, to już doskonale wiesz jak go rozwiązać :).