Bagaimana cara menghapus ruang di antara elemen inline / inline-block?

Diberikan ini HTML dan CSS:

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

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

Akibatnya, akan ada ruang selebar 4 pixel antara elemen SPAN.

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

Saya mengerti mengapa ini terjadi, dan saya juga tahu bahwa saya bisa menghilangkan ruang itu dengan menghapus ruang putih antara elemen SPAN dalam kode sumber HTML, seperti:

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

Namun, saya berharap untuk solusi CSS yang tidak memerlukan kode sumber HTML untuk dirusak.

Saya tahu bagaimana menyelesaikan ini dengan JavaScript - dengan menghapus node teks dari elemen container (paragraf), seperti:

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

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

Tetapi bisakah masalah ini diselesaikan dengan CSS saja?

Karena jawaban ini menjadi agak populer, saya menulis ulang secara signifikan.

Jangan lupa pertanyaan aktual yang ditanyakan:

Bagaimana cara menghapus ruang antar elemen blok-inline ? Saya berharap untuk solusi CSS yang tidak memerlukan kode sumber HTML untuk dirusak. Bisakah masalah ini diselesaikan dengan CSS saja?

Hal ini mungkin untuk memecahkan masalah ini dengan CSS saja, tetapi tidak ada benar-benar perbaikan CSS kuat.

Solusi yang saya miliki dalam jawaban awal saya adalah menambahkan font-size: 0elemen induk, dan kemudian menyatakan masuk akal font-sizepada anak-anak.

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

Ini berfungsi di versi terbaru dari semua browser modern. Ia bekerja di IE8. Tidak bekerja di Safari 5, tetapi tidak bekerja di Safari 6. Safari 5 hampir browser mati ( 0,33%, Agustus 2015 ).

Sebagian besar masalah yang mungkin terjadi dengan ukuran font relatif tidak rumit untuk diperbaiki.

Namun, meskipun ini adalah solusi yang masuk akal jika Anda secara khusus memerlukan perbaikan CSS saja, itu bukan yang saya sarankan jika Anda bebas mengubah HTML Anda (seperti kebanyakan dari kita).

Inilah yang saya lakukan, sebagai pengembang web yang cukup berpengalaman, untuk menyelesaikan masalah ini:

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

Ya itu betul. Saya menghapus spasi putih di HTML antara elemen inline-block.

Mudah. Itu mudah. Ini bekerja di mana-mana. Ini solusi pragmatis.

Terkadang Anda harus mempertimbangkan dengan hati-hati dari mana ruang putih akan datang. Apakah menambahkan elemen lain dengan JavaScript akan menambah spasi? Tidak, tidak jika Anda melakukannya dengan benar.

Mari kita melakukan perjalanan ajaib berbagai cara untuk menghapus spasi putih, dengan beberapa HTML baru:

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

• Anda dapat melakukan ini, seperti 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 ini:

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

• Atau, gunakan komentar:

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

• Atau, jika Anda menggunakan menggunakan PHP atau yang serupa:

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

• Atau, Anda bahkan dapat melewati tag penutup tertentu sepenuhnya (semua browser tidak masalah dengan ini):

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

Sekarang setelah saya pergi dan membuat Anda bosan sampai mati dengan "seribu cara berbeda untuk menghapus spasi putih, tiga puluhdot", mudah-mudahan Anda sudah melupakan semuanya font-size: 0.

Atau, sekarang Anda dapat menggunakan flexbox untuk mencapai banyak tata letak yang sebelumnya mungkin Anda gunakan di-blok inline untuk: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Untuk browser yang menyesuaikan CSS3 ada white-space-collapsing:discard

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

EDIT:

hari ini, kita cukup menggunakan Flexbox .

JAWABAN TUA:

OK, walaupun saya telah font-size: 0;mengangkat not implemented CSS3 featurejawaban dan jawabannya, setelah mencoba saya menemukan bahwa tidak ada satupun yang merupakan solusi nyata .

Sebenarnya, tidak ada satu solusi pun tanpa efek samping yang kuat.

Kemudian saya memutuskan untuk menghapus spasi (jawaban ini tentang argumen ini) antara inline-blockdiv dari HTMLsumber saya ( JSP), mengubah ini:

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

untuk ini

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

itu jelek, tapi berhasil.

Tapi, tunggu dulu ... bagaimana jika aku menghasilkan div di dalam Taglibs loops ( Struts2, JSTL, dll ...)?

Sebagai contoh:

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

Sama sekali tidak masuk akal untuk menyejajarkan semua hal itu, artinya

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

itu tidak mudah dibaca, sulit untuk dipertahankan dan dipahami, dll ...

Solusi yang saya temukan:

gunakan komentar HTML untuk menghubungkan ujung satu div ke awal yang berikutnya!

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

Dengan cara ini Anda akan memiliki kode yang dapat dibaca dan indentasi dengan benar.

Dan, sebagai efek samping positif, the HTML source , meskipun dipenuhi oleh komentar kosong, akan menghasilkan indentasi yang benar;

mari kita ambil contoh pertama. Menurut pendapat saya yang sederhana, ini:

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

lebih baik dari ini:

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

Tambahkan komentar antara elemen untuk TIDAK memiliki ruang putih. Bagi saya itu lebih mudah daripada mengatur ulang ukuran font menjadi nol dan kemudian mengaturnya kembali.

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

Semua teknik eliminasi ruang untuk display:inline-blockhack jahat ...

Gunakan Flexbox

Ini luar biasa, menyelesaikan semua bs tata letak inline-blok ini, dan pada 2017 memiliki 98% dukungan browser (lebih jika Anda tidak peduli dengan IE lama).

• Apakah Kami Siap Menggunakan Flexbox?
• Menggunakan kotak fleksibel CSS - Panduan pengembang web | MDN
• Panduan Lengkap untuk Flexbox | Trik CSS
• Flexy Boxes - taman bermain CSS flexbox dan alat penghasil kode

Tambahkan display: flex;ke elemen induk. Ini solusinya dengan awalan:

Versi sederhana 👇

p {
  display: flex;
}

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

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

Perbaiki dengan awalan 👇

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>

Ini adalah jawaban yang sama dengan yang saya berikan pada yang terkait: Tampilan: Inline block - Ruang apa itu?

Sebenarnya ada cara yang sangat sederhana untuk menghapus spasi dari inline-block yang mudah dan semantik. Ini disebut font khusus dengan spasi nol-lebar, yang memungkinkan Anda untuk mengosongkan spasi putih (ditambahkan oleh browser untuk elemen inline ketika mereka berada di baris terpisah) di tingkat font menggunakan font yang sangat kecil. Setelah Anda mendeklarasikan font, Anda hanya perlu mengganti font-familypada wadah dan kembali lagi pada anak-anak, dan voila. Seperti ini:

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

Sesuai selera. Ini adalah unduhan untuk font yang baru saja saya buat di font-forge dan dikonversi dengan generator fontfont WebSquirrel. Butuh saya semua 5 menit. @font-faceDeklarasi css termasuk: zip spasi font dengan lebar nol . Itu ada di Google Drive sehingga Anda harus mengklik File> Unduh untuk menyimpannya ke komputer Anda. Anda mungkin perlu mengubah jalur font juga jika Anda menyalin deklarasi ke file css utama Anda.

Dua opsi lagi berdasarkan Modul Teks CSS Level 3 (bukannya white-space-collapsing:discardyang telah dihapus dari draft spesifikasi):

• word-spacing: -100%;

Secara teori, itu harus melakukan apa yang dibutuhkan - mempersingkat spasi putih antara 'kata' dengan 100% dari lebar karakter spasi, yaitu menjadi nol. Tetapi sepertinya tidak berfungsi di mana saja, sayangnya, dan fitur ini ditandai 'berisiko' (bisa juga dihapus dari spesifikasi).

• word-spacing: -1ch;

Ini mempersingkat spasi antar kata dengan lebar digit '0'. Dalam font monospace harus persis sama dengan lebar karakter spasi (dan karakter lain juga). Ini berfungsi di Firefox 10+, Chrome 27+, dan hampir berfungsi di Internet Explorer 9+.

Biola

Sayangnya, ini tahun 2019 dan white-space-collapsemasih belum diimplementasikan.

Sementara itu, berikan elemen induk font-size: 0;dan atur font-sizepada anak-anak. Ini harus melakukan trik

Gunakan flexbox dan lakukan fallback (dari saran di atas) untuk browser lama:

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

Sederhana:

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

Tidak perlu menyentuh elemen induk.

Hanya syarat di sini: ukuran font item tidak boleh ditentukan (harus sama dengan ukuran font induk).

0.25em adalah standarnya word-spacing

W3Schools - properti penspasian kata

ukuran font: 0; bisa sedikit rumit untuk dikelola ...

Saya pikir garis pasangan berikut ini jauh lebih baik dan lebih dapat digunakan kembali, dan hemat waktu daripada metode lain. Saya pribadi menggunakan ini:

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

Maka Anda dapat menggunakannya sebagai berikut ...

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

Sejauh yang saya tahu (saya mungkin salah) tetapi semua browser mendukung metode ini.

PENJELASAN :

Ini berfungsi (mungkin -3px mungkin lebih baik) persis seperti yang Anda perkirakan akan berhasil.

• Anda menyalin dan menempelkan kode (sekali)
• kemudian pada html Anda cukup gunakan class="items"pada induk dari setiap inline-block.

Anda TIDAK perlu kembali ke css, dan menambahkan aturan css lain, untuk blok inline baru Anda.

Memecahkan dua masalah sekaligus.

Perhatikan juga >(lebih besar dari tanda) ini berarti * / semua anak harus inline-block.

http://jsfiddle.net/fD5u3/

CATATAN: Saya telah memodifikasi untuk mengakomodasi mewarisi spasi huruf ketika pembungkus memiliki pembungkus anak.

Padahal, secara teknis bukan jawaban untuk pertanyaan: "Bagaimana cara menghapus ruang antara elemen blok inline?"

Anda dapat mencoba solusi flexbox dan menerapkan kode di bawah ini dan ruang akan dihapus.

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

Anda dapat mempelajari lebih lanjut tentang hal ini di tautan ini: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Saya tidak yakin apakah Anda ingin membuat dua bentang biru tanpa celah atau ingin menangani ruang putih lainnya, tetapi jika Anda ingin menghilangkan celah:

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

    float: left;
}

Dan selesai.

Umumnya kami menggunakan elemen seperti ini di baris yang berbeda, tetapi jika display:inline-blockmenggunakan tag di baris yang sama akan menghapus spasi, tetapi di baris yang berbeda tidak akan.

Contoh dengan tag di baris yang berbeda:

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

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

Contoh dengan tag di baris yang sama

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

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

Metode efisien lain adalah pekerjaan CSS yang menggunakan font-size:0elemen induk dan memberikan font-sizeelemen anak sebanyak yang Anda inginkan.

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

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

Metode di atas mungkin tidak bekerja di suatu tempat tergantung pada seluruh aplikasi, tetapi metode terakhir adalah solusi yang sangat mudah untuk situasi ini dan dapat digunakan di mana saja.

Saya memiliki masalah ini sekarang dan dari font-size:0;saya telah menemukan bahwa di Internet Explorer 7 masalahnya tetap karena Internet Explorer berpikir "Ukuran Huruf 0?!?! WTF apakah Anda orang gila?" - Jadi, dalam kasus saya saya telah me-reset CSS Eric Meyer dan dengan font-size:0.01em;saya memiliki perbedaan 1 pixel dari Internet Explorer 7 ke Firefox 9, jadi, saya pikir ini bisa menjadi solusi.

Saya telah menangani hal ini baru-baru ini dan alih-alih mengatur induk font-size:0lalu mengatur anak kembali ke nilai yang masuk akal, saya telah mendapatkan hasil yang konsisten dengan mengatur wadah induk letter-spacing:-.25emkemudian anak kembali ke letter-spacing:normal.

Dalam utas alternatif saya melihat komentator menyebutkan bahwa font-size:0tidak selalu ideal karena orang dapat mengontrol ukuran font minimum di browser mereka, sepenuhnya meniadakan kemungkinan pengaturan ukuran font menjadi nol.

Menggunakan ems tampaknya berfungsi terlepas dari apakah ukuran font yang ditentukan adalah 100%, 15pt atau 36px.

http://cdpn.io/dKIjo

Saya pikir ada metode yang sangat sederhana / lama untuk ini yang didukung oleh semua browser bahkan IE 6/7. Kami cukup menetapkan letter-spacingnilai negatif besar di induk dan kemudian mengembalikannya ke normalelemen child:

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>

Jawaban paling sederhana untuk pertanyaan ini adalah menambahkan.

css

float: left;

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

Dengan kurung PHP:

ul li {
  display: inline-block;
}

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

Saya akan memperluas jawaban user5609829 sedikit karena saya percaya solusi lain di sini terlalu rumit / terlalu banyak pekerjaan. Menerapkan a margin-right: -4pxke elemen blok sebaris akan menghapus spasi dan didukung oleh semua browser. Lihat biola yang diperbarui di sini . Untuk mereka yang peduli dengan menggunakan margin negatif, cobalah memberikan ini read.

Spesifikasi CSS Text Module Level 4 mendefinisikantext-space-collapse properti, yang memungkinkan untuk mengontrol bagaimana ruang putih di dalam dan di sekitar elemen diproses.

Jadi, mengenai contoh Anda, Anda hanya perlu menulis ini:

p {
  text-space-collapse: discard;
}

Sayangnya, belum ada browser yang mengimplementasikan properti ini (per September 2016) seperti yang disebutkan dalam komentar atas jawaban HBP .

Saya menemukan solusi CSS murni yang bekerja untuk saya dengan sangat baik di semua browser:

span {
    display: table-cell;
}

Tambahkan white-space: nowrapke elemen wadah:

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>

Di sini adalah Plunker .

Ada banyak solusi seperti font-size:0, word-spacing, margin-left, letter-spacingdan sebagainya.

Biasanya saya lebih suka menggunakan letter-spacingkarena

1. tampaknya ok ketika kita menetapkan nilai yang lebih besar dari lebar ruang ekstra (mis -1em.).
2. Namun, tidak akan apa-apa dengan word-spacingdan margin-leftketika kita menetapkan nilai yang lebih besar suka -1em.
3. Penggunaan font-sizetidak nyaman ketika kami mencoba menggunakan emsebagai font-sizeunit.

Jadi, letter-spacingsepertinya menjadi pilihan terbaik.

Namun, saya harus memperingatkan Anda

ketika Anda menggunakan letter-spacingAnda sebaiknya menggunakan -0.3ematau -0.31emtidak orang lain.

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

Jika Anda menggunakan Chrome (versi uji 66.0.3359.139) atau Opera (versi uji 53.0.2907.99), yang Anda lihat mungkin:

Jika Anda menggunakan Firefox (60.0.2), IE10 atau Edge, apa yang Anda lihat mungkin:

Itu menarik. Jadi, saya memeriksa spasi huruf-mdn dan menemukan ini:

panjangnya

Menentukan ruang antar-karakter tambahan di samping ruang default antar karakter. Nilai mungkin negatif, tetapi mungkin ada batas implementasi khusus. Agen pengguna tidak dapat menambah atau mengurangi ruang antar karakter lebih lanjut untuk membenarkan teks.

Tampaknya inilah alasannya.

Tambahkan letter-spacing:-4px;pada pcss induk dan tambahkan letter-spacing:0px;ke spancss Anda .

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>

Saya pikir saya akan menambahkan sesuatu yang baru untuk pertanyaan ini karena walaupun banyak jawaban yang diberikan saat ini lebih dari cukup & relevan, ada beberapa properti CSS baru yang dapat mencapai hasil yang sangat bersih, dengan dukungan penuh di semua browser, dan sedikit untuk tidak ada 'peretasan'. Ini memang menjauh dari inline-blocktetapi memberi Anda hasil yang sama seperti pertanyaan yang diajukan.

Properti CSS ini adalah grid

CSS Grid sangat didukung ( CanIUse ) selain dari IE yang hanya membutuhkan -ms-awalan agar bisa berfungsi.

CSS Grid juga sangat fleksibel, dan mengambil semua bagian yang baik dari table, flex, dan inline-blockelemen dan membawa mereka ke dalam satu tempat.

Saat membuat, gridAnda dapat menentukan celah antara baris dan kolom. Kesenjangan default sudah diatur ke 0pxtetapi Anda dapat mengubah nilai ini ke apa pun yang Anda suka.

Singkatnya, inilah contoh kerja yang relevan:

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>

Satu cara lain yang saya temukan adalah menerapkan margin-kiri sebagai nilai negatif kecuali elemen pertama dari baris.

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

Setiap pertanyaan, yang mencoba untuk menghapus spasi antara inline-blocks sepertinya<table> bagiku ...

Coba sesuatu seperti ini:

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>