[html] How do I remove the space between inline/inline-block elements?

Given this HTML and CSS:

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

<p>_x000D_
    <span> Foo </span>_x000D_
    <span> Bar </span>_x000D_
</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?

Negative margin

You can scoot the elements back into place with negative 4px of margin (may need to be adjusted based on font size of parent). Apparently this is problematic in older IE (6 & 7), but if you don’t care about those browsers at least you can keep the code formatting clean.

span {
  display: inline-block;
  margin-right: -4px;
}

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

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.

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

Try something like this:

p {_x000D_
  display: table;_x000D_
}_x000D_
span {_x000D_
  width: 100px;_x000D_
  border: 1px solid silver; /* added for visualization only*/_x000D_
  display: table-cell;_x000D_
}

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

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

span {
    display: table-cell;
}

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

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

span {_x000D_
  display:inline-block;_x000D_
  width:100px;_x000D_
  background-color:palevioletred;_x000D_
  vertical-align:bottom;_x000D_
  letter-spacing:0px;_x000D_
}_x000D_
_x000D_
p {_x000D_
  letter-spacing:-4px;_x000D_
}

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

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/

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

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

Just for fun: an easy JavaScript solution.

document.querySelectorAll('.container').forEach(clear);_x000D_
_x000D_
function clear(element) {_x000D_
  element.childNodes.forEach(check, element);_x000D_
}_x000D_
_x000D_
function check(item) {_x000D_
  if (item.nodeType === 3) this.removeChild(item);_x000D_
}

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

<p class="container">_x000D_
  <span> Foo </span>_x000D_
  <span> Bar </span>_x000D_
</p>

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

Why not something like this... a bit hacky, and depends on your code for the css units, but:

.my-span {
    position: relative;
    left: -1em;
    width: 1em;
}

<span>...</span><span class="my-span"></span>

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>

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>

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

Simplified version

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

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

Fix with prefix

p {_x000D_
  display: -webkit-box;_x000D_
  display: -webkit-flex;_x000D_
  display: -ms-flexbox;_x000D_
  display: flex;_x000D_
}_x000D_
span {_x000D_
  float: left;_x000D_
  display: inline-block;_x000D_
  width: 100px;_x000D_
  background: blue;_x000D_
  font-size: 30px;_x000D_
  color: white;_x000D_
  text-align: center;_x000D_
}

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

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.

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:

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

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.

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 }_x000D_
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */_x000D_
_x000D_
.no-spacing { letter-spacing: -1em; } /* could be a large negative value */_x000D_
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */

<p style="color:red">Wrong (default spacing):</p>_x000D_
_x000D_
<div class="">_x000D_
  <span>Item-1</span>_x000D_
  <span>Item-2</span>_x000D_
  <span>Item-3</span>_x000D_
</div>_x000D_
_x000D_
<hr/>_x000D_
_x000D_
<p style="color:green">Correct (no-spacing):</p>_x000D_
_x000D_
<div class="no-spacing">_x000D_
  <span>Item-1</span>_x000D_
  <span>Item-2</span>_x000D_
  <span>Item-3</span>_x000D_
</div>

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.

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

• Are We Ready to Use Flexbox?
• Using CSS flexible boxes - Web developer guide | MDN
• A Complete Guide to Flexbox | CSS-Tricks
• Flexy Boxes — CSS flexbox playground and code generation tool

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 {_x000D_
  font-family: sans-serif;_x000D_
  font-size: 16px;_x000D_
}_x000D_
_x000D_
ul {_x000D_
  list-style: none_x000D_
}_x000D_
_x000D_
li {_x000D_
  background: #000;_x000D_
  display: inline-block;_x000D_
  padding: 4px;_x000D_
  color: #fff;_x000D_
}_x000D_
_x000D_
ul.white-space-fix li {_x000D_
  margin-right: -4px;_x000D_
}_x000D_
_x000D_
ul.zero-size {_x000D_
  font-size: 0px;_x000D_
}_x000D_
_x000D_
ul.zero-size li {_x000D_
  font-size: 16px;_x000D_
}_x000D_
_x000D_
ul.flexbox {_x000D_
  display: -webkit-box;_x000D_
  display: -moz-box;_x000D_
  display: -ms-flexbox;_x000D_
  display: -webkit-flex;_x000D_
  display: flex;_x000D_
}

original..._x000D_
<ul>_x000D_
  <li>one</li>_x000D_
  <li>two</li>_x000D_
  <li>three</li>_x000D_
</ul>_x000D_
_x000D_
Funky code formatting..._x000D_
<ul>_x000D_
  <li>_x000D_
   one</li><li>_x000D_
   two</li><li>_x000D_
   three</li>_x000D_
</ul>_x000D_
_x000D_
Adding html comments..._x000D_
<ul>_x000D_
  <li>one</li><!--_x000D_
  --><li>two</li><!--_x000D_
  --><li>three</li>_x000D_
</ul>_x000D_
_x000D_
CSS margin-right: -4px;_x000D_
<ul class="white-space-fix">_x000D_
  <li>one</li>_x000D_
  <li>two</li>_x000D_
  <li>three</li>_x000D_
</ul>_x000D_
_x000D_
Omitting the &lt;/li&gt;_x000D_
<ul>_x000D_
  <li>one_x000D_
    <li>two_x000D_
      <li>three_x000D_
</ul>_x000D_
_x000D_
fixed with font-size: 0_x000D_
<br><br>_x000D_
<ul class="zero-size">_x000D_
  <li>one</li>_x000D_
  <li>two</li>_x000D_
  <li>three</li>_x000D_
</ul>_x000D_
_x000D_
<br> flexbox_x000D_
<br>_x000D_
<ul class="flexbox">_x000D_
  <li>one</li>_x000D_
  <li>two</li>_x000D_
  <li>three</li>_x000D_
</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/

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

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.

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 so many methods:

1. Font size to zero

   nav {
       font-size: 0;
   }
   nav a {
       font-size: 16px;
   }
   

2. Negative margin

   div a {
       display: inline-block;
       margin-right: -4px;
   }
   

3. Skip the closing tag

   <ul>
       <li> one
       <li> two
       <li> three
   </ul>
   

4. Use comments:

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

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

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.

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 {_x000D_
  display: inline-block;_x000D_
  background: red;_x000D_
}

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

Example with tags in same line

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

<p>_x000D_
  <span> Foo </span><span> Bar </span>_x000D_
</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 {_x000D_
  font-size: 0;_x000D_
}_x000D_
p span {_x000D_
  display: inline-block;_x000D_
  background: red;_x000D_
  font-size: 14px;_x000D_
}

<p>_x000D_
  <span> Foo </span>_x000D_
  <span> Bar </span>_x000D_
</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.

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.

The simplest answer to this question is to add.

css

float: left;

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

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

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

I thought I'd add something new to this question as although many of the answers currently provided are more than adequate & relevant, there are some new CSS properties which can achieve a very clean output, with full support across all browsers, and little to no 'hacks'. This does move away from inline-block but it gives you the same results as the question asked for.

These CSS properties are grid

CSS Grid is highly supported (CanIUse) apart from IE which only needs an -ms- prefix to allow for it to work.

CSS Grid is also highly flexible, and takes all the good parts from table, flex, and inline-block elements and brings them into one place.

When creating a grid you can specify the gaps between the rows and columns. The default gap is already set to 0px but you can change this value to whatever you like.

To cut it a bit short, heres a relevant working example:

body {_x000D_
  background: lightblue;_x000D_
  font-family: sans-serif;_x000D_
}_x000D_
_x000D_
.container {_x000D_
  display: grid;_x000D_
  grid-template-columns: 100px 100px;_x000D_
  grid-column-gap: 0; /* Not needed but useful for example */_x000D_
  grid-row-gap: 0; /* Not needed but useful for example */_x000D_
}_x000D_
_x000D_
.box {_x000D_
  background: red;_x000D_
}_x000D_
.box:nth-child(even) {_x000D_
  background: green;_x000D_
}

<div class="container">_x000D_
  <div class="box">_x000D_
    Hello_x000D_
  </div>_x000D_
  <div class="box">_x000D_
    Test_x000D_
  </div>  _x000D_
</div>

If you're using Twig template engine, you can use spaceless:

<p>
    {% spaceless %}
    <span>Foo</span>
    <span>Bar</span>
    {% endspaceless %}
</p>

Note whilst this doesn't address the exact question asked, this could be useful if someone has Twig at their disposal, to avoid using some lesser solution.

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 {_x000D_
    letter-spacing: -.31em;_x000D_
    *letter-spacing: normal;_x000D_
    *word-spacing: -.43em;_x000D_
_x000D_
    /* For better view */_x000D_
    background: #f9f9f9;_x000D_
    padding: 1em .5em;_x000D_
}_x000D_
_x000D_
.col {_x000D_
    display: inline-block;_x000D_
    *display: inline;_x000D_
    zoom: 1;_x000D_
    letter-spacing: normal;_x000D_
    word-spacing: normal;_x000D_
_x000D_
    /* For better view */_x000D_
    padding: 16px;_x000D_
    background: #dbdbdb;_x000D_
    border: 3px #bdbdbd solid;_x000D_
    box-sizing: border-box;_x000D_
    width: 25%;_x000D_
}

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

With PHP brackets:

ul li {_x000D_
  display: inline-block;_x000D_
}

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