How to Get Rid of White Spaces Between Spans Without Manipulating The HTML

How to remove the space between two span tags?

I usually set font-size of the parent container to zero, which makes white spaces causing gaps to disappear. You then just need to set font-size back to necessary value for spans, for example:

.container {
    font-size: 0;     // whitespaces go away
}
.container span {
    font-size: 16px;  // spans text please stay
    background: #DDD;
    padding: 2px 4px;
}

Demo: http://jsfiddle.net/we9bvrpe/

How do I get rid of white spaces between spans without manipulating the HTML?

Try setting display: inline-block on the image elements. Spans are supposed to be inline, so the best solution would be to not use spans at all, but since you said don't change the html...

See how there's no spaces between the images in this fiddle: http://jsfiddle.net/rVTZc/

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

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.

how to remove the white space between two span tags?

Update Css

.left-top-text {
    display: inline-block;
    padding-top: 6px;
    font-size: 30px;
    white-space: nowrap;
    margin-left: -5px;
}

Snippet Example

.side-bar{        background-color: red;     }    @media (min-width: 768px){        .side-bar{            z-index:10;            position:absalute;            width:220px;            /*padding-top:60px;*/            height:100%;            /*top:0;*/            position:fixed;
    }    }    @media (min-width: 768px){        .top-left-part{            width:220px;            position:fixed;            z-index: 11;            /*top: 0;*/            height: 60px;        }    }    /*---------------top left part starts here------------*/    .top-left-part{        width:220px;        float:left;        background-color: #ffffff;        /*padding-top: 60px;*/    }    .top-left-image{        float: left;        height: 40px;        width: 50px;        padding-left: 1.3px;        padding-right: 10px;        padding-top: 2.7px;    }   .left-top-text {    display: inline-block;    padding-top: 6px;    font-size: 30px;    white-space: nowrap;    margin-left: -5px;   }    .text-elite{        font-weight: 600;    }    .text-admin{        padding-left: -5px;    }    /*---------------top left part ends here-------------*/    /*---------------top-right part starts here----------*/    .top-right-part{        top: 0 !important;        background-color:#4F5467;        width:100%;        height:60px;        right: 0;    }    .arrow-left{        color: white;    }    /*---------------top right part ends here-------------*/

<html>    <head>              <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />              <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />              <link rel="stylesheet" type="text/css" href="css/style.css" />              <link rel="stylesheet" type="text/css" href="font-awesome-4.2.0/css/font-awesome.min.css" />              <meta name="viewport" content="width=device-width, initial-scale=1.0">        <link rel="stylesheet" href="css/elite.css" type="text/css">        <script src="js/elite.js">        </script>    </head>    <body>        <div id="top-bar">            <div class="top-left-part">                <span ><img src="img/elite-icon.jpg" class="top-left-image"> </span>                <span class="left-top-text text-elite">elite </span>                <span class="left-top-text text-admin">admin</span>            </div>            <div class="top-right-part">                <span class="arrow-left fa-arrow-left"> </span>            </div>        </div>        <div id="bottom-part">            <div id="left-side-bar" class="side-bar">
            </div>            <div id="right-side-container">            </div>        </div>    </body></html>

<span>h</span><span>e</span><span>l</span><span>l</span><span>o</span><span></span><span>w</span><span>o</span><span>r</span><span>l</span><span>d</span>

<div class="col"><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span></div>

*{margin:0;padding:0px; font-size: 0;}
.field {
    display:inline-block;
    width:20px;height:20px;
    font-size: 14px;
}

<div class="col">
    <span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span>
</div>

.field  {
    margin-left: -4px;
    display:inline-block;
    width:20px;height:20px;
    font-size: 14px;
}

<div class="col">
    <span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
</div>

#output h1 {margin-top:0; padding-top:0;}