By Šime Vidas


2011-02-22 12:41:14 8 Comments

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?

30 comments

@dipole_moment 2015-06-02 23:40:31

Unfortunately, it is 2019 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

@thirtydot 2011-02-22 12:47:40

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.


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/

@Šime Vidas 2011-02-22 13:04:13

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

@thirtydot 2011-02-22 13:05:55

That's really weird (and unfortunate), I would have thought Chrome and Safari would behave the same.

@Šime Vidas 2011-02-22 13:32:08

Yea, it seems I'll have to use some fix for Safari - for instance, this: span + span { margin-left:-1px; }.

@helgatheviking 2011-07-26 05:18:58

font-size zero works great in most browsers for me. still experiencing same issue with Safari. sad face in indeed

@Šime Vidas 2011-08-01 20:05:51

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

@thirtydot 2011-08-01 22:14:55

@Steph Thirion 2011-11-18 00:21:19

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.

@thirtydot 2011-11-18 11:57:39

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

@Philip Walton 2012-02-16 07:42:55

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.

@meo 2012-06-26 14:40:31

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

@Kevin Andrews 2012-08-14 13:50:34

works perfectly for me only thing I had to do was reset the font size for all child elements: .parent * { font-size: 14px; }

@Foxinni 2012-09-12 14:25:59

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.

@Daniel 2013-01-15 11:30:06

This breaks child elements with relative font-sizes.

@el Dude 2013-01-31 17:06:16

try letter-spacing:0 =))

@太極者無極而生 2014-04-26 00:19:36

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

@thirtydot 2014-04-26 12:53:40

@動靜能量: 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.

@David Thomas 2014-11-14 12:41:30

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

@Musixauce3000 2015-12-18 16:30:21

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?

@Deji 2016-02-09 09:48:18

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

@GolezTrol 2016-08-05 11:26:35

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.

@thirtydot 2016-08-05 13:13:24

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

@GolezTrol 2016-08-05 14:32:15

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.

@Christopher Alun Lewis 2016-11-18 14:25:52

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.

@thirtydot 2016-11-18 16:28:18

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

@person27 2016-12-03 22:13:34

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.

@BoltClock 2018-02-10 05:50:37

Everyone criticizing this answer for not being perfect needs to remember that using inline-blocks for (horizontal) block layout is their first mistake to begin with. Of course these solutions are going to be hacky, of course they're not going to work in every situation - when you're using inline-block for something it was never intended for, it's either your fault for using it or CSS's fault for not offering any good alternatives at the time, but not this answerer's fault that their workarounds aren't ideal.

@BoltClock 2018-02-10 05:56:00

@Christopher Alun Lewis: That's because the premise of the question (not this answer) is fundamentally wrong to begin with. The whole point of inline layout is for whitespace to do what it does best: separate words, or in this case atomic inlines. Treating whitespace as a problem that needs to be removed from a layout that uses inline-blocks, rather than as a feature, is like treating text wrapping around a float as a problem when it's the whole point of floating. Even so, inadequate as they both are, floats at least have the advantage over inline-blocks of actually being block layout.

@Tarun.. 2019-03-13 06:24:51

span { 
    display:inline-block;
    width:50px;
    background:blue;
    font-size:30px;
    color:white; 
    text-align:center;
}
<p><span>Foo</span><span>Bar</span></p>

@Andrea Ligios 2013-02-08 16:12:59

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

@jknotek 2018-05-04 22:11:09

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

@Rahul Kapuriya 2019-01-30 12:32:06

Use one of these tricks

  1. Remove the spaces
  2. Negative margin
  3. Skip the closing tag (HTML5 doesn't care anyway)
  4. Set the font size to zero (A space that has zero font-size is... zero width)
  5. Use flexbox

See the code below:

body {
  font-family: sans-serif;
  font-size: 16px;
}

ul {
  list-style: none
}

li {
  background: #000;
  display: inline-block;
  padding: 4px;
  color: #fff;
}

ul.white-space-fix li {
  margin-right: -4px;
}

ul.zero-size {
  font-size: 0px;
}

ul.zero-size li {
  font-size: 16px;
}

ul.flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
original...
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Funky code formatting...
<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

Adding html comments...
<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

CSS margin-right: -4px;
<ul class="white-space-fix">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

Omitting the &lt;/li&gt;
<ul>
  <li>one
    <li>two
      <li>three
</ul>

fixed with font-size: 0
<br><br>
<ul class="zero-size">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

<br> flexbox
<br>
<ul class="flexbox">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

@Mark Salvania 2018-09-07 21:44:15

Add letter-spacing:-4px; on parent p css and add letter-spacing:0px; to your span css.

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>

@Mo. 2015-10-21 10:46:04

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>


Update

Simplified version 👇

p {
  display: flex;
}

span {
  width: 100px;
  background: tomato;
  font-size: 30px;
  color: white;
  text-align: center;
}
<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

@Gokul 2018-07-10 18:24:05

The simplest answer to this question is to add.

css

float: left;

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

@Dazzle 2019-01-16 17:32:36

This should be the accepted answer. Simply add this to left and center components, bang - done.

@xianshenglu 2018-06-18 11:15:18

There are lots of solutions like font-size:0,word-spacing,margin-left,letter-spacing and so on.

Normally I prefer using letter-spacing because

  1. it seems ok when we assign a value which is bigger than the width of extra space(e.g. -1em).
  2. However, it won't be okay with word-spacing and margin-left when we set bigger value like -1em.
  3. Using font-size is not convenient when we try to using em as font-size unit.

So, letter-spacing seems to be the best choice.

However, I have to warn you

when you using letter-spacing you had better using -0.3em or -0.31em not others.

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

If you are using Chrome(test version 66.0.3359.139) or Opera(test version 53.0.2907.99), what you see might be:

enter image description here

If you are using Firefox(60.0.2),IE10 or Edge, what you see might be:

enter image description here

That's interesting. So, I checked the mdn-letter-spacing and found this:

length

Specifies extra inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits. User agents may not further increase or decrease the inter-character space in order to justify text.

It seems that this is the reason.

@Cyan Baltazar 2017-01-09 04:02:35

Though, technically not an answer to the question: "How do I remove the space between inline-block elements?"

You can try the flexbox solution 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/

@Lucas 2017-02-24 21:21:33

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

@S.Serpooshan 2017-01-18 12:10:03

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

@Gaurav Aggarwal 2017-01-23 05:49:00

same thing happening here u need to set letter-spacing:normal in all the child elements.

@S.Serpooshan 2017-01-23 05:58:59

@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

@Gaurav Aggarwal 2017-01-23 06:21:53

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

@S.Serpooshan 2017-01-23 09:26:08

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

@Ilya Streltsyn 2017-08-08 15:50:19

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.

@Sam 2018-01-10 20:16:04

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>

@Balchandar Reddy 2017-09-20 06:48:09

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/

@Alexufo 2017-04-04 12:49:32

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>

@FlyC 2016-12-06 04:03:35

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.

@John Gillespie 2016-10-12 13:05:58

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

@jseezo 2016-10-05 09:45:50

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>

@Sanjib Debnath 2016-08-05 05:17:44

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>
    

@Martin Schneider 2016-12-01 12:19:16

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.

@Milad 2016-08-05 03:01:46

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.

@Martin Schneider 2016-07-12 11:27:12

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

@Franz Deschler 2016-05-29 16:23:17

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

span {
    display: table-cell;
}

@Madan Bhandari 2016-05-30 12:27:19

this question is about inline-block.

@Gaurav Aggarwal 2015-11-27 21:20:29

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.

@S.Serpooshan 2017-01-23 04:29:26

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!

@Plippie 2013-11-19 14:46:21

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

@Ilya Streltsyn 2013-07-24 02:42:18

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

@Dennis98 2015-10-27 08:55:06

+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. :)

@Ilya Streltsyn 2015-11-13 12:12:53

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

@S.Serpooshan 2017-01-18 12:14:43

instead of word-spacing, we could use letter-spacing with an arbitrary large negative value as shown in my answer

@Nelson Conceição 2012-01-18 01:11:29

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.

@Yarin 2014-12-13 14:21:00

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

@patrick 2016-06-19 21:50:41

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!

@Yarin 2017-04-27 01:57:32

@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 stackoverflow.com/a/27459133/165673

@ViliusL 2018-04-04 13:23:35

"font-size:0" does not work on 100% browsers. (minimum font size browser settings). And this answer is really good.

@Usagi Miyamoto 2017-01-28 05:41:50

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>

@Sukhminder Parmar 2016-09-15 04:16:32

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

@Sebastian Zartner 2016-09-06 08:13:54

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.

@Jrd 2016-02-15 12:52:52

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.

@Martin Schneider 2016-07-12 11:45:34

This will not work if user changes the default font-size of his browser. Better use -0.25em.

Related Questions

Sponsored Content

25 Answered Questions

[SOLVED] Space between two rows in a table?

  • 2008-12-08 21:49:59
  • Marin
  • 1077313 View
  • 720 Score
  • 25 Answer
  • Tags:   html css

22 Answered Questions

[SOLVED] How can I set the default value for an HTML <select> element?

  • 2010-08-19 01:10:51
  • Jichao
  • 2218732 View
  • 1263 Score
  • 22 Answer
  • Tags:   html html-select

4 Answered Questions

[SOLVED] What is the difference between display: inline and display: inline-block?

  • 2012-01-23 09:22:22
  • Logesh Paul
  • 176799 View
  • 567 Score
  • 4 Answer
  • Tags:   css display

9 Answered Questions

[SOLVED] Need to insert space between inline elements

  • 2014-05-27 16:33:43
  • user1050619
  • 30820 View
  • 2 Score
  • 9 Answer
  • Tags:   html css

21 Answered Questions

[SOLVED] How to write a:hover in inline CSS?

14 Answered Questions

[SOLVED] How to move an element into another element?

  • 2009-08-14 20:14:45
  • Mark Richman
  • 1013139 View
  • 1568 Score
  • 14 Answer
  • Tags:   javascript jquery html

1 Answered Questions

[SOLVED] CSS display: inline vs inline-block

  • 2012-02-08 08:24:15
  • user926958
  • 482799 View
  • 527 Score
  • 1 Answer
  • Tags:   css

2 Answered Questions

[SOLVED] space between an inline-block element and a block element

  • 2015-03-20 11:11:24
  • kptlronyttcna
  • 51 View
  • 0 Score
  • 2 Answer
  • Tags:   html css

5 Answered Questions

[SOLVED] Remove white space between div blocks

  • 2014-06-18 13:09:42
  • TobiasW
  • 1587 View
  • 1 Score
  • 5 Answer
  • Tags:   html css css3

6 Answered Questions

[SOLVED] remove right margin from an inline-block

  • 2013-11-18 13:47:40
  • You Know Nothing Jon Snow
  • 381 View
  • 2 Score
  • 6 Answer
  • Tags:   html css

Sponsored Content