How to Remove the Space Between Inline/Inline-Block Elements

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.

Can't get rid of spaces between inline-block elements

put the close tag of one and the open tag of the next element on the same line:

<div class="top-menu-item">
Item 2
</div><div class="top-menu-item">
Item 3</div>

Inline elements take the whitespace that is between them and this renders as 1 space. If you put the next element directly after the previous there will be no whitespace in between and the space will be gone.

Spacing between inline-block divs, can't solve by removing whitespace

You could ty using a negative margin on the inline-block items.
Take a look at this jsFiddle

.col-center {
display: inline-block;
border: 1px solid blue;
text-align: left;
margin: 0 -2px;
padding: 10px;
}

How can I eliminate spacing between inline elements in CSS?

try to add img {margin:0;padding:0;float:left}

in other words remove any default margin and padding of browsers for img and float them.

Demo: http://jsfiddle.net/PZPbJ/

How can I remove space between inline-block elements

You can try to apply:

margin:0; padding:0; float:left;

Check this out: http://jsfiddle.net/65adr/7/


Also check out this page for alternatives:

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Vertical space between inline-block elements smaller than font

Why is this happening?

The font-size of the parent element, in this case body, affects the inline-block divs, essentially treating them like text.

How can we keep the elements inline-block with no white space?

The parent element, body in this example, is given font-size: 0, you would then give the child elements a font-size:

body {font-size: 0;}.blue{background:blue;}.red{background:red;}
.blue,.red{ width: 100%; height:5px; display: inline-block;}
<div class="blue"></div><div class="red"></div>

Space between inline-block and inline element

When an inline element's boundary lies between two spaces the space that follows the boundary (outside the inline element) is removed, leaving the space within the inline element. In your case, the space that is trimmed off is the newline that separates your span elements. From the spec:

For each inline element (including anonymous inline elements), the following steps are performed, treating bidi formatting characters as if they were not there:


  1. If 'white-space' is set to 'normal', 'nowrap', or 'pre-line',


    1. any space (U+0020) following another space (U+0020) — even a space before the inline, if that space also has 'white-space' set to 'normal', 'nowrap' or 'pre-line' — is removed.

Note that this is only the case with inline boxes, i.e. display: inline elements — not inline-blocks. Appending a space to the content of your inline-block element will not cause the space after it to be collapsed away.

The height difference mainly has to do with how the height of inline elements vs inline-blocks is calculated, which is an entire topic in itself. See sections 10.6.6 and 10.8.1 of the spec.



Related Topics



Leave a reply



Submit