Given this HTML and CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

As a result, there will be a 4 pixel wide space between the SPAN elements.

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

I understand why this happens, and I also know that I could get rid of that space by removing the white-space between the SPAN elements in the HTML source code, like so:

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

However, I was hoping for a CSS solution that doesn't require the HTML source code to be tampered with.

I know how to solve this with JavaScript - by removing the text nodes from the container element (the paragraph), like so:

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

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

But can this issue be solved with CSS alone?

3 upvote
  flag
@Kyle Sevenoaks - It may not always be 4px; I'd say margin-left:1em, since the gap will be one character, so will be relative to the font size. – Spudley
upvote
  flag
What happened to my comment? @Spudley, I read it was a 4px gap, it worked for me, but like I said it wasn't the best as it also leftified the first element. – Kyle
3 upvote
  flag
@Kyle: 1em may just be 4px for you with that font at that resolution. – Lightness Races in Orbit
upvote
  flag
@Spudley: Gap is not 1 character but one space, which is more likely half EM and not whole one. But this is also determined by each font. They may define space of different size... Just FYI. – Robert Koritnik
upvote
  flag
upvote
  flag
@Spudley That solution has already been suggested in this thread. See HBP's answer below. – Šime Vidas
upvote
  flag
See my answer in this question for a full set of options relevant now: //allinonescript.com/questions/14630061/… – ktamlyn
upvote
  flag
Thanks for this jQuery to remove these items. I have a scenario where I'm appending elements the DOM using jQuery's .append() method. Removing the text nodes after appending my elements fixed my 3px gap issues. – David
3 upvote
  flag
possible duplicate of display: inline-block extra margin – Liam
upvote
  flag

33 Answers 11

up vote 780 down vote accepted

Since this answer has become rather popular, I'm rewriting it significantly.

Let's not forget the actual question that was asked:

How to remove the space between inline-block elements? I was hoping for a CSS solution that doesn't require the HTML source code to be tampered with. Can this issue be solved with CSS alone?

It is possible to solve this problem with CSS alone, but there are no completely robust CSS fixes.

The solution I had in my initial answer was to add font-size: 0 to the parent element, and then declare a sensible font-size on the children.

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

This works in recent versions of all modern browsers. It works in IE8. It does not work in Safari 5, but it does work in Safari 6. Safari 5 is nearly a dead browser (0.33%, August 2015).

Most of the possible issues with relative font sizes are not complicated to fix.

However, while this is a reasonable solution if you specifically need a CSS only fix, it's not what I recommend if you're free to change your HTML (as most of us are).


This is what I, as a reasonably experienced web developer, actually do to solve this problem:

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

Yes, that's right. I remove the whitespace in the HTML between the inline-block elements.

It's easy. It's simple. It works everywhere. It's the pragmatic solution.

You do sometimes have to carefully consider where whitespace will come from. Will appending another element with JavaScript add whitespace? No, not if you do it properly.

Let's go on a magical journey of different ways to remove the whitespace, with some new HTML:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
  • You can do this, as I usually do:

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

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

  • Or, this:

    <ul>
        <li>Item 1</li
        ><li>Item 2</li
        ><li>Item 3</li>
    </ul>
    
  • Or, use comments:

    <ul>
        <li>Item 1</li><!--
        --><li>Item 2</li><!--
        --><li>Item 3</li>
    </ul>
    
  • Or, you can even skip certain closing tags entirely (all browsers are fine with this):

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

Now that I've gone and bored you to death with "one thousand different ways to remove whitespace, by thirtydot", hopefully you've forgotten all about font-size: 0.


Alternatively, you can now use flexbox to achieve many of the layouts that you may previously have used inline-block for: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

7 upvote
  flag
It works in FF3.6, IE9RC, O11, Ch9. However, in Safari 5 there still remains a 1px wide gap :( – Šime Vidas
upvote
  flag
That's really weird (and unfortunate), I would have thought Chrome and Safari would behave the same. – thirtydot
1 upvote
  flag
Yea, it seems I'll have to use some fix for Safari - for instance, this: span + span { margin-left:-1px; }. – Šime Vidas
upvote
  flag
font-size zero works great in most browsers for me. still experiencing same issue with Safari. sad face in indeed – helgatheviking
7 upvote
  flag
@thirtydot Could you check out the comment of this answer. It could be that this font-size:0 trick is not such a good idea after all... – Šime Vidas
1 upvote
  flag
17 upvote
  flag
I know the poster is looking for a CSS solution, but this solution - which is by far the most voted (30 votes vs 5 as I write this) - has strong side effects and doesn't even work cross browser. At this point it's more pragmatic to simply remove the problematic whitespace in your HTML. – Steph Thirion
upvote
  flag
@Steph Thirion: Tell me about it: "To be honest, I always just remove the whitespace...". To be honest, I should edit this answer to be more like that answer. – thirtydot
1 upvote
  flag
This is a really BAD method if you want to use any font-size unit other than pixels. Setting the font-size to 0 makes it impossible to use ems or percentages in subelements. The Yahoo Grids method mentioned is a MUCH safer solution and with far fewer side effects. – Philip Walton
9 upvote
  flag
this solution only works if you dont work with EMs for your container sizes – meo
upvote
  flag
works perfectly for me only thing I had to do was reset the font size for all child elements: .parent * { font-size: 14px; } – Kevin Andrews
upvote
  flag
This is my current working fix, but putting the font-size to 0 does make me sweat. There seems to be no clean fix for this issue as of yet. – Foxinni
6 upvote
  flag
This breaks child elements with relative font-sizes. – Daniel
upvote
  flag
try letter-spacing:0 =)) – el Dude
upvote
  flag
isn't this a big issue that the font-size cannot be inherited from the parent. Also, if another designer comes in and add another region into the container, and the text is not showing, it can be a hard to find bug – 太極者無極而生
1 upvote
  flag
@動靜能量: I wouldn't call it a "big issue", more of an occasional annoyance. It's not going to take a competent designer very long to find out why text with font-size: 0 is not showing, especially if browser inspection tools are used. – thirtydot
2 upvote
  flag
I considered editing to add this, but I wasn't entirely sure it was sufficiently worthwhile to do so; but it's possible to use a relative font-size to override the font-size: 0 ancestor, using either rem, vh, vw or vmin/vmax (of which rem is likely the better choice, depending upon compatibility). – David Thomas
upvote
  flag
Removing the whitespace in the html is the pragmatic solution when your elements contain example text like Foo Bar -but when you're trying to build the skeletons of complex layout structures --not so much. Although I do wonder if perhaps there is a counter command to the &nbsp or 'force space' code that could essentially do the exact opposite, and remove white space that hasn't been explicitly added in the source, but is assumed because of the syntax rules of html. Does any one know of a solution like this? – Musixauce3000
1 upvote
  flag
@Musixauce3000 on the contrary, I do all of my HTML output via a hypertext processor, called PHP, which helps me split up big complex layout structures into lots of tiny code which looks 'Foo Bar' ish... Beyond that, I just practise reading inline HTML, it's really not that hard once you start. HTML is an awful language for downloading so first priority for me is to pick a way to write it which doesn't depend on neat syntax and formatting. The only reason I'm here is through working with sites where I can't chose how they wrote it. – Deji
1 upvote
  flag
Omitting the closing of the </li> isn't solving the problem per se, because the whitespace is still there, although it's now part of the contents of the li instead of part of the ul. – GolezTrol
upvote
  flag
@GolezTrol: It does solve the problem, as far as I know. The whitespace is indeed moved inside the li, but the whitespace is also not rendered (unless you have white-space: pre or similar). Can you show me an example? – thirtydot
1 upvote
  flag
Yes. The reason is because out of curiosity I tried that solution (jsFiddle) when I closed this question as a duplicate. It is a special case though. OP is rendering ::after content, which had a space after it, and with this solution it gets a space in front of the extra content. But I realize now that that is the cause. Because of the extra content, the space is not trimmed anymore. – GolezTrol
upvote
  flag
Such mixed feelings about this answer. I love the simplicity of just removing the whitespace from the tags. It works, its simple, its cross-browser. Brilliant. However something just feels so fundamentally wrong that the layout of your markup fixes a problem. – Christopher Alun Lewis
1 upvote
  flag
@ChristopherAlunLewis: It does feel wrong. Unfortunately though, it is the easiest solution in most cases. However, you can now often use flexbox instead of display: inline-block to achieve a comparable layout. – thirtydot
upvote
  flag
I recommend running a script to remove whitespace before the file is uploaded to the local test server (and minify before uploading to remote server). No discrepancies or compromising. – person27
upvote
  flag
@thirtydot : can you take a look to my problem, i think my problem have something similar with this topic but my don't know how to solved it : //allinonescript.com/q/41318507/823906 – Tran
upvote
  flag
I am confused a little, why is float not mentioned here as solution,??? – Suraj Jain
upvote
  flag
@SurajJain: It is a "solution" in the sense that it may solve your problem using a completely different layout method (also: flexbox). This question is about inline-block. It's like asking "how do I fix my car?" and someone replies "use your bike instead" - not usually helpful. – thirtydot

For CSS3 conforming browsers there is white-space-collapsing:discard

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

upvote
  flag
Wouldn't you want to use trim-inner rather than discard? – spb
38 upvote
  flag
This was removed from Text Level 3, but Text Level 4 has text-space-collapse:discard. It's 2016 already and still no support. – Oriol
13 upvote
  flag
2017. Nope, not even close yet. – Serge Seredenko
upvote
  flag
Hello, 2017 here. Can I ask why this solution is needed, as there are so many other solutions that do work? I mean, some of the 2011 solutions still work even now! – Mr Lister
upvote
  flag
@MrLister: Other solutions don't work in all cases. For example I don't know about any solution, which will remove trailing space from <p>A long text...</p>, where opening and closing tags are on the separate lines than the text content. That's something I do all the time to keep my HTML files tidy and readable. – Robert Kusznier
upvote
  flag
@Robert float – Mr Lister
upvote
  flag
@MrLister Floating removes the trailing space indeed, but has serious side-effects - totally changes the element's position in container's layout. How do I do that, when floating an element destroys my layout (which is usually the case)? – Robert Kusznier

I had this problem right now and from font-size:0; I've found that in Internet Explorer 7 the problem remains because Internet Explorer thinks "Font Size 0?!?! WTF are you crazy man?" - So, in my case I've Eric Meyer's CSS reset and with font-size:0.01em; I have a difference of 1 pixel from Internet Explorer 7 to Firefox 9, so, I think this can be a solution.

Ok, although I've upvoted both the font-size: 0; and the not implemented CSS3 feature answers, after trying I found out that none of them is a real solution.

Actually, there is not even one workaround without strong side effects.

Then I decided to remove the spaces (this answers is about this argument) between the inline-block divs from my HTML source (JSP), turning this:

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

to this

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

that is ugly, but working.

But, wait a minute... what if I'm generating my divs inside Taglibs loops (Struts2, JSTL, etc...) ?

For example:

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

It is absolutely not thinkable to inline all that stuff, it would mean

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

that is not readable, hard to mantain and understand, etc...

The solution i found:

use HTML comments to connect the end of one div to the begin of the next one!

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

This way you will have a readable and correctly indented code.

And, as a positive side effect, the HTML source, although infested by empty comments, will result correctly indented;

let's take the first example, imho this:

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

is better than this

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

Hope that helps...

1 upvote
  flag
This technique doesn't work for DIVs on IE8. It only works for SPAN or other natural inline tags. – ricosrealm
2 upvote
  flag
The technique is about avoiding THE EXTRA SPACES put by browsers when two inline-block elements are put one after the other. IE8 problem is not the extra-space: IE8 problem is that he handle inline-block on DIVs as BLOCK, not as INLINE. Open this with IE8 or IE9 in IE8 compatibility mode: jsbin.com/ujilav/1 – Andrea Ligios
5 upvote
  flag
IE8+ in their normal mode support inline-block for all elements. It's IE7- (and IE7 Emulation mode of newer versions) problem with inline-block for "natively block-level" elements. But there is an easy workaround for this — display: inline + any property that triggers 'hasLayout' (e.g. zoom: 1). – Ilya Streltsyn
2 upvote
  flag
Works nicely in Android 2+, Firefox 4+, Safari 5, IE8+, Windows Phone 7.8 and 8 and of course in modern browsers. – Aaaron
upvote
  flag
why is float not mentioned here as solution,??? – Suraj Jain
upvote
  flag
@SurajJain Because it's not. It's a way to avoid this problem by choosing another UI pattern, with its own drawbacks. – Andrea Ligios

Add comments between elements to NOT have a white space. For me it is easier than resetting font size to zero and then setting it back.

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

Two more options based on CSS Text Module Level 3 (instead of white-space-collapsing:discard which had been dropped from the spec draft):

  • word-spacing: -100%;

In theory, it should do exactly what is needed — shorten whitespaces between 'words' by the 100% of the space character width, i.e. to zero. But seems not to work anywhere, unfortunately, and this feature is marked 'at risk' (it can be dropped from the specification, too).

  • word-spacing: -1ch;

It shortens the inter-word spaces by the width of the digit '0'. In a monospace font it should be exactly equal to the width of the space character (and any other character as well). This works in Firefox 10+, Chrome 27+, and almost works in Internet Explorer 9+.

Fiddle

upvote
  flag
+1 for word-spacing, although -0.5ch is the right value, with -1ch text without spaces won't be readable, -0.5ch behaves just like font-size: 0; with explicit set size at text elements. :) – Dennis98
2 upvote
  flag
@Dennis98, -1ch works only for monospace fonts (like Courier New), because all their characters have the same width, including ' ' and '0'. In non-monospace fonts there is no all-suitable magic proportion between widths of ' ' and '0' characters, so ch isn't much helpful at all. – Ilya Streltsyn
upvote
  flag
instead of word-spacing, we could use letter-spacing with an arbitrary large negative value as shown in my answer – S.Serp

I’ve been tackling this recently and instead of setting the parent font-size:0 then setting the child back to a reasonable value, I’ve been getting consistent results by setting the parent container letter-spacing:-.25em then the child back to letter-spacing:normal.

In an alternate thread I saw a commenter mention that font-size:0 isn’t always ideal because people can control minimum font sizes in their browsers, completely negating the possibility of setting the font-size to zero.

Using ems appears to work regardless of whether the font-size specified is 100%, 15pt or 36px.

http://cdpn.io/dKIjo

upvote
  flag
In Firefox for Android, I see a 1px space between the boxes. – Šime Vidas

Use flexbox and do a fallback (from suggestions above) for older browsers:

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

This is the same answer I gave over on the related: Display: Inline block - What is that space?

There’s actually a really simple way to remove whitespace from inline-block that’s both easy and semantic. It’s called a custom font with zero-width spaces, which allows you to collapse the whitespace (added by the browser for inline elements when they're on separate lines) at the font level using a very tiny font. Once you declare the font, you just change the font-family on the container and back again on the children, and voila. Like this:

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

Suit to taste. Here’s a download to the font I just cooked up in font-forge and converted with FontSquirrel webfont generator. Took me all of 5 minutes. The css @font-face declaration is included: zipped zero-width space font. It's in Google Drive so you'll need to click File > Download to save it to your computer. You'll probably need to change the font paths as well if you copy the declaration to your main css file.

1 upvote
  flag
I saw you post this in CSS Tricks I think, and for me this is a great answer. It's lightweight, easy to implement and cross-browser (so far as my tests have shown). I was totally going with flexbox until I realised that Firefox won't support flex-wrap until at least v28 (srsly?), but this is a perfect fallback until then. – indextwo
7 upvote
  flag
This is the worst case of overkill I saw in a long while. Download an entire font just to remove a space? Geez. – Mr Lister

font-size:0; can be a bit trickier to manage...

I think the following couple lines is a lot better and more re-usable, and time saver than any other methods. I personally use this:

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

Then you can use it as following...

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

As far I as I know (I may be wrong) but all browsers support this method.

EXPLANATION:

This works (maybe -3px may be better) exactly as you would anticipate it to work.

  • you copy and paste the code (once)
  • then on your html just use class="items" on the parent of each inline-block.

You will NOT have the need to go back to the css, and add another css rule, for your new inline blocks.

Solving two issues at once.

Also note the > (greater than sign) this means that */all children should be inline-block.

http://jsfiddle.net/fD5u3/

NOTE: I have modified to accommodate to inherit letter-spacing when a wrapper has a child wrapper.

upvote
  flag
instead of -4px for letter-spacing which may be not enough for large font-sizes eg: see this fiddle, we could use a larger value as in my post – S.Serp
<ul class="items">
   <li>Item 1</li><?php
 ?><li>Item 2</li><?php
 ?><li>Item 3</li>
</ul>

Thats all. In other lang by analogy

All the space elimination techniques for display:inline-block are nasty hacks...

Use Flexbox

It's awesome, solves all this inline-block layout bs, and as of 2017 has 98% browser support (more if you don't care about old IEs).

1 upvote
  flag
nasty hack may be, but font-size:0 works on 100% of the browsers, and applying display: inline-flex still doesn't get rid of the extra whitespace, even on a browser that does support it! – patrick
upvote
  flag
@patrick Flexbox definitely solves the problem, you're just doing it wrong. inline-flex is not meant to display flex items inline- it applies only to containers. See //allinonescript.com/a/27459133/165673 – Yarin

Unfortunately, it is 2015 and white-space-collapse is still not implemented.

In the meantime, give the parent element font-size: 0; and set the font-size on the children. This should do the trick

Add display: flex; to the parent element. Here is the solution with a prefix:

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>

Generally we use elements like this in different lines, but in case of display:inline-block using tags in same line will remove the space, but in a different line will not.

An example with tags in a different line:

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Example with tags in same line

p span {
  display: inline-block;
  background: red;
}
<p>
  <span> Foo </span><span> Bar </span>
</p>


Another efficient method is a CSS job that is using font-size:0 to the parent element and give font-size to a child element as much as you want.

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

The above methods may not work somewhere depending on the whole application, but the last method is a foolproof solution for this situation and can be used anywhere.

upvote
  flag
a disadvantage for this method is that we need to know and repeat the default font-size (eg 14px) to set it back to normal in child elements! – S.Serp

So a lot of complicated answers. The easiest way I can think of is to just give one of the elements a negative margin (either margin-left or margin-right depending on the position of the element).

p {
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: red;
  font-size: 30px;
  color: white;
}
<p>
  <span> hello </span>
  <span> world </span>
</p>

1 upvote
  flag
While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – Ashish Ahuja

I'm going to expand on user5609829's answer a little bit as I believe the other solutions here are too complicated/too much work. Applying a margin-right: -4px to the inline block elements will remove the spacing and is supported by all browsers. See the updated fiddle here. For those concerned with using negative margins, try giving this a read.

3 upvote
  flag
This will not work if user changes the default font-size of his browser. Better use -0.25em. – MA-Maddin

I found a pure CSS solution that worked for me very well in all browsers:

span {
    display: table-cell;
}
upvote
  flag
this question is about inline-block. – NeosFox

Simple:

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

There is no need to touch the parent element.

Only condition here: the item's font-size must not be defined (must be equal to parent's font-size).

0.25em is the default word-spacing

W3Schools - word-spacing property

Add white-space: nowrap to the container element:

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>

Here is the Plunker.

Remove the spaces from inline block elements. There are many methods:

  1. Negative margin

    div a {
        display: inline - block;
        margin - right: -4 px;
    }
    
  2. Font size to zero

    nav {
        font - size: 0;
    }
    nav a {
        font - size: 16 px;
    }
    
  3. Skip the closing tag

    < ul >
        < li > one
        < li > two
        < li > three
    < /ul>
    
upvote
  flag
1. negative margin in px is not good because it depends on the parent's font-size. so 4px would only work with parent font-size: 16px. 2. font-size: 0 is differntly interpreted by every browser/engine, so not always working. 3. not compatible with XHTML. – MA-Maddin

The CSS Text Module Level 4 specification defines a text-space-collapse property, which allow to control the how white space inside and around an element is processed.

So, regarding your example, you would just have to write this:

p {
  text-space-collapse: discard;
}

Unfortunately, no browser is implementing this property yet (as of September 2016) as mentioned in the comments to the answer of HBP.

One another way I found is applying margin-left as negative values except the first element of the row.

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

There is a easy solution in CSS. For example:

HTML

<p class="parent">
    <span class="children"> Foo </span>
    <span class="children"> Bar </span>
</p>

CSS

.parent {
    letter-spacing: -.31em;
    *letter-spacing: normal;
    *word-spacing: -.43em;
}
.children {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
}

In my opinion writing font-size: 0 is not safe when you use it in a project like em, so I prefer purecss' solution.

You can check this framework in this link purecss. Enjoy :)

.row {
    letter-spacing: -.31em;
    *letter-spacing: normal;
    *word-spacing: -.43em;

    /* For better view */
    background: #f9f9f9;
    padding: 1em .5em;
}

.col {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;

    /* For better view */
    padding: 16px;
    background: #dbdbdb;
    border: 3px #bdbdbd solid;
    box-sizing: border-box;
    width: 25%;
}
<div class="row">

    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
    <div class="col">4</div>

</div>

I tried out the font-size: 0 solution to a similar problem in React and Sass for a Free Code Camp project I am currently working through.

And it works!

First, the script:

var ActionBox = React.createClass({
    render: function() {
        return(
            <div id="actionBox">
                </div>
        );
    },
});

var ApplicationGrid = React.createClass({
    render: function() {
        var row = [];
        for(var j=0; j<30; j++){
            for(var i=0; i<30; i++){
                row.push(<ActionBox />);
            }
        }
        return(
            <div id="applicationGrid">
                {row}
            </div>
        );
     },
});

var ButtonsAndGrid = React.createClass({
    render: function() {
        return(
            <div>
                <div id="buttonsDiv">
                </div>
                <ApplicationGrid />
            </div>
        );
    },
});

var MyApp = React.createClass({
    render: function() {
        return(
            <div id="mainDiv">
                <h1> Game of Life! </h1>
                <ButtonsAndGrid />
            </div>
        );
    },
});

ReactDOM.render(
    <MyApp />,
    document.getElementById('GoL')
);

Then, the Sass:

html, body
    height: 100%

body
    height: 100%
    margin: 0
    padding: 0

#mainDiv
    width: 80%
    height: 60%
    margin: auto
    padding-top: 5px
    padding-bottom: 5px
    background-color: DeepSkyBlue
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#buttonsDiv
    width: 80%
    height: 60%
    margin: auto
    margin-bottom: 0px
    padding-top: 5px
    padding-bottom: 0px
    background-color: grey
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#applicationGrid
    width: 65%
    height: 50%
    padding-top: 0px
    margin: auto
    font-size: 0
    margin-top: 0px
    padding-bottom: 5px
    background-color: white
    text-align: center
    border: 2px solid #381F0B
    border-radius: 4px
    margin-top: 20px

#actionBox
    width: 20px
    height: 20PX
    padding-top: 0px
    display: inline-block
    margin-top: 0px
    padding-bottom: 0px
    background-color: lightgrey
    text-align: center
    border: 2px solid grey
    margin-bottom: 0px

I'm not pretty sure if you want to make two blue spans without a gap or want to handle other white-space, but if you want to remove the gap:

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

    float: left;
}

And done.

You can try the flexbox and apply the code below and the space will be remove.

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

You can learn more about it on this link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

upvote
  flag
While technically not an answer to "can I do this with inline-block" this seems to me to be an elegant solution... – Lucas

I think there is a very simple/old method for this which is supported by all browsers even IE 6/7. We could simply set letter-spacing to a large negative value in parent and then set it back to normal at child elements:

body {font-size: 24px}

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

.item {
  padding: 2px; border: 1px solid #b0b0c0; /* show edges */
  letter-spacing: normal; /* => back to normal letter-spacing */
}
<p style="color:red">Wrong (default spacing):</p>

<div class="container">

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

</div>

<hr/>

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

<div class="container no-spacing">

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

</div>

upvote
  flag
same thing happening here u need to set letter-spacing:normal in all the child elements. – Gaurav Aggarwal
upvote
  flag
@GauravAggarwal but letter-spacing is 99.99% of the times as normal. the font-size has not such a fixed value and highly depends on design. it could be a small value or large value based on the font-family and other things... I never remember in my life to see/use a special value (other than 0/normal) for letter-spacing, so i think it is safer and better choise – S.Serp
upvote
  flag
i disagree with this...using letter spacing to normal with all the elements and using font-size too (If needed) is not at all usefull as u r writing double code where u need to change font size. Using font size will not make double code and can be used o standard size and any other custom size. I suggest you to do google and check using font size is most acceptable thing these days. Solution changes with time :) – Gaurav Aggarwal
upvote
  flag
i can't understand what you mean by "...and using font-size too (If needed) is not at all usefull as u r writing double code where u need to change font size." in my post, there is no font-size setting! all i did is letter-spacing which usually nobody set it in his css (it is always normal). ans as we don't change font-size, we don't need to know original font-size to set it back – S.Serp
upvote
  flag
I suppose this method didn't become popular before because it didn't work in Opera/Presto. And currently we have other options that don't need such workarouns, e.g. using Flexbox instead of inline-blocks. – Ilya Streltsyn

Every question, that try to remove the space between inline-blocks seems like a <table> to me...

Try something like this:

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>

With PHP brackets:

ul li {
  display: inline-block;
}
    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>

Try this snippet:

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

Working demo: http://jsfiddle.net/dGHFV/2784/

Just for fun: an easy JavaScript solution.

document.querySelectorAll('.container').forEach(clear);

function clear(element) {
  element.childNodes.forEach(check, element);
}

function check(item) {
  if (item.nodeType === 3) this.removeChild(item);
}
span {
  display: inline-block;
  width: 100px;
  background-color: palevioletred;
}
<p class="container">
  <span> Foo </span>
  <span> Bar </span>
</p>

Not the answer you're looking for? Browse other questions tagged or ask your own question.