Categories
css flexbox html

How to remove the space between inline/inline-block elements?

1233

There will be a 4 pixel wide space between these span elements:

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

Fiddle Demo

I understand that I could get rid of that space by removing the white-space between the span elements in the HTML:

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

I’m Looking for a CSS solution that doesn’t involve:

  • Altering the HTML.
  • JavaScript.

3

1149

Alternatively, you should 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/


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, if you are using using PHP or similar:

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

9

  • 8

    It works in FF3.6, IE9RC, O11, Ch9. However, in Safari 5 there still remains a 1px wide gap :(

    Feb 22, 2011 at 13:04

  • 8

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

    Aug 1, 2011 at 20:05

  • 31

    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.

    Nov 18, 2011 at 0:21


  • 11

    this solution only works if you dont work with EMs for your container sizes

    – meo

    Jun 26, 2012 at 14:40


  • 7

    This breaks child elements with relative font-sizes.

    – Daniel

    Jan 15, 2013 at 11:30

168

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

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

2

  • 60

    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

    Jan 4, 2016 at 15:53

  • 1

    Seems obsolete. CSS is not available in Chrome (built May 2022).

    – Avatar

    May 8 at 7:02

108

Today, we should just use Flexbox.


OLD ANSWER:

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 maintain 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. In my humble opinion, 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>

2

  • 1

    Note that this may also break code folding functionality in your editor.

    – jknotek

    May 4, 2018 at 22:11

  • 1

    An example of using Flexbox at the top would improve this answer.

    – TylerH

    Feb 26, 2021 at 19:19