A Space Between Inline-Block List Items

A space between inline-block list items

I have seen this and answered on it before:

After further research I have
discovered that inline-block is a
whitespace dependent method and
is dependent on the font setting. In this case 4px is rendered.

To avoid this you could run all your
lis together in one line, or block
the end tags and begin tags together
like this:

<ul>
        <li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li><li>
            <div>first</div>
        </li>
</ul>

Example here.

As mentioned by other answers and comments, the best practice for solving this is to add font-size: 0; to the parent element:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

This is better for HTML readability (avoiding running the tags together etc). The spacing effect is because of the font's spacing setting, so you must reset it for the inlined elements and set it again for the content within.

How to add space between inline-block elements?

Maybe this will help you

<html><head>
<style>
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: solid 1px;
  font-size: 0;
}
#main {
  max-width: 452px;
  margin: 0 auto;
}
.item {
  display: inline-block;
  width: 150px;
}
.item1 {
  display: inline-block;
  width: 150px;
  padding:0px 4px;
}
.item img {
  width: 200px;
}
.clearfix {
  overflow: auto;
}
li {
  list-style-type: none;
}
</style>

   </head>
   <body>
   <div id="main">

 <li class="item clearfix">
    <a href="project.html">
      <div class="thumb">
        <img src="http://static01.nyt.com/images/2015/06/23/business/greece-portraits-restauranteur/greece-portraits-restauranteur-mediumThreeByTwo225.jpg" alt="Portraits From Greece as It Endures a Crisis">
    </a>
  </li>
  <li class="item1 clearfix">
    <a href="project.html">
      <div class="thumb">
        <img src="http://static01.nyt.com/images/2015/06/23/business/greece-portraits-restauranteur/greece-portraits-restauranteur-mediumThreeByTwo225.jpg" alt="Portraits From Greece as It Endures a Crisis">
    </a>
  </li>
  <li class="item clearfix">
    <a href="project.html">
      <div class="thumb">
        <img src="http://static01.nyt.com/images/2015/06/23/business/greece-portraits-restauranteur/greece-portraits-restauranteur-mediumThreeByTwo225.jpg" alt="Portraits From Greece as It Endures a Crisis">
      </div>
     </a>
  </li>

 </div>

</body></html>

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.

HTML inline-block list has unknown spaces in between

You should remove any white-space between the inline-block elements you have. inline-block elements are like inline elements and if you add any white-space between them it will normally show.

Look at this example http://codepen.io/anon/pen/spbtv/

You can have white-space inside your inline-block elements to increase readability.

<ul>
   <li>
       <a href="#">TEST1 <span>2</span></a>
   </li><li>
       <a href="#">TEST2 <span>2</span></a>
   </li><li>
       <a href="#">TEST3 <span>2</span></a>
   </li><li>
       <a href="#">TEST4 <span>2</span></a>
   </li>
</ul>

Extra Space Between inline-block DIV Elements

You need to comment out the white space between the elements, like so:

<div class="tile-container">
       <div class="tile-large">1</div><!--
    --><div class="tile-wide">2</div><!--
    --><div class="tile-small">3</div><!--
    --><div class="tile-small">4</div><!--
    --><div class="tile-small">5</div><!--
    --><div class="tile-small">6</div><!--
    --><div class="tile-wide">7</div><!--
    --><div class="tile-large">8</div>
</div>

DEMO: http://jsfiddle.net/P7cbA/11/

Another way is to put the elements in the HTML in one line without any spaces between them, but this reduces the code readability:

<div class="tile-container">
       <div class="tile-large">1</div><div class="tile-wide">2</div><div class="tile-small">3</div><div class="tile-small">4</div><div class="tile-small">5</div><div class="tile-small">6</div><div class="tile-wide">7</div><div class="tile-large">8</div>
</div>

How to add equal space between inline block elements?

You could use Flexbox and justify-content: space-between;

.container {  width: 100%;  border: 1px solid red;  text-align: center;  display: flex;  flex-wrap: wrap;  justify-content: space-between;  padding: 5px 0;}.container .block {  border: 1px solid green;  padding: 10px;}

<div class="container">  <div class="block">Some block</div>  <div class="block">Some block</div>  <div class="block">Some block</div>  <div class="block">Some block</div></div>

Space between nowrap inline blocks

That's because of a space character between inline(-block) elements (a line break and a few tabs counts as a space), This could be fixed by commenting that space out this way:

<div style="background: red;"></div><!-- 
 --><div style="background: yellow;"></div><!-- 
 --><div style="background: green;"></div><!-- 
 --><div style="background: blue;"></div>

Online Demo.

Actually, it's not a bug, it's the normal behavior of the inline elements; Just like when you place an image next to a line of text, or put a button next to an input element.

There are couple of ways to remove the space between inline(-block) elements:

Minimized the HTML
Negative margins
Comment the white space out
Break the closing tag
Set the font size of the parent to zero then reset that for children
Float the inline items instead
Use flexbox

Check the Chris Coyier's Article, or these similar topics on SO:

Why is there a gap between image and navigation bar
How to remove the space between inline-block elements?
A Space between Inline-Block List Items
How to remove "Invisible space" from HTML

How to create space between inline-block buttons?

CSS:

.pagination{
    position:absolute;
    right:18%;
    top:75%;
}

.pagination li{
    display:inline-block;
    list-style-type:none;
    text-align:center;
}

.pagination a{
    color:#fff;
    text-decoration:none;
    font-size:25px;
}

.back{
    background:#155484;
    padding:20px;
    border:2px solid #fff;
    border-radius:3px;
    float:left;
}

.next{
    margin-left:10px;
    background:#155484;
    padding:20px;
    border:2px solid #fff;
    border-radius:3px;
    float:right;
}

HTML:

<div class="pagination">
{block:Pagination}
            {block:PreviousPage}
                <div class="back">
                <a href="{PreviousPage}">《</a>
                </div>
            {/block:PreviousPage}
            {block:NextPage}
                <div class="next">
                <a href="{NextPage}">》</a>
                </div>
            {/block:NextPage}
        {/block:Pagination}
</div>

Spacing between inline-block

Remove the white space in the code between your divs. Inline elements are sensitive to that spacing.

</div><div

codepen example

How To Add Space Between Two Inline-Block Elements (Screenshot Included)?

You can add margin to .links div

.links {  padding-bottom: 30px;  margin: 0 auto;  width: 85%;}
.links div {  display: inline-block;  width: 50%;  height: 430px;  margin-bottom: 25px;}
.shop {  background: url("https://static.pexels.com/photos/27714/pexels-photo-27714.jpg") no-repeat top center;}
.journal {  background: url("https://static.pexels.com/photos/27714/pexels-photo-27714.jpg") no-repeat top center;}
.links div h2 {  padding-top: 170px;  font-size: 32px;  text-align: center;  font-family: 'Montserrat', sans-serif;}

<section class="links">
  <a href="productPage.php">    <div class="shop">      <h2>Shop</h2>    </div>  </a>  <a href="blog/cms.php">    <div class="journal">      <h2>Journal</h2>    </div>  </a>
</section>

A Space Between Inline-Block List Items