display: inline-block extra margin [duplicate]

Question

This question already has an answer here:

• How do I remove the space between inline-block elements? 35 answers

I'm working with a few divs that are set to display: inline-block and have a set height and width. In the HTML, if there is a line break after each div there is an automatic 5px margin add to the right and bottom of the div.

Example:

<div>Some Text</div>
<div>Some Text</div>

Is there a property that I've overlooked that will allow me to reset the automatic margin?

Update

From what I've found there is no way to remove the margin... except if you either have everything on the same line or, add comments to comment out the line breaks. example:

<div>Some Text</div><!--
--><div>Some Text</div>

Not the best solution, but still easier to read if you have multiple lines.

Answer 1

I encountered the same problem. What caused it for me were a bunch of whitespaces ( ) that I inserted. After removing them, the problem was solved.

Answer 2

Cleaner way to remove those spaces is by using float: left; :

DEMO

HTML:

<div>Some Text</div>
<div>Some Text</div>

CSS:

div {
    background-color: red;
    float: left;
}

I'ts supported in all new browsers. Never got it why back when IE ruled lot's of developers didn't make sue their site works well on firefox/chrome, but today, when IE is down to 14.3 %. anyways, didn't have many issues in IE-9 even thought it's not supported, for example the above demo works fine.

Answer 3

After struggling with this issue too many times I found a very elegant solution in HTML 5. In HTML 5 you should not close several (li,p,etc) tags; the ambition to become XML is forever gone. For example, the preferred way to do a list is:

<ul>
   <li>
       <a ...>...</a>
   <li>
       <a ...>...</a>
</ul>

Browsers MUST close the LI and they must do this without introducing whitespace, solving this problem. If you still have the XML mindset it feels wrong but once you get over that it saves many a nightmare. And this is not a hack since it relies on the wording of the HTML 5 spec. Better, since not closing tags is pervasive I expect no compatibility issues (not tested though). Bonus is that HTML formatters handle this well.

A little worked out example: http://cssdesk.com/Ls7fK

Answer 4

For the record, that margin and padding resetting didn't do the trick for me, but this quote from one of the comments above turned out to be crucial and solved the issue for me: "If i put the divs on the same line it margin disappears."

Answer 5

White space affects inline elements.

This should not come as a surprise. We see it every day with span, strong and other inline elements. Set the font size to zero to remove the extra margin.

.container {
  font-size: 0px;
  letter-spacing: 0px;
  word-spacing: 0px;
}

.container > div {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  font-size: 15px;
  letter-spacing: 1em;
  word-spacing: 2em;
}

The example would then look like this.

<div class="container">
  <div>First</div>
  <div>Second</div>
</div>

A jsfiddle version of this. http://jsfiddle.net/QtDGJ/1/

Answer 6

Can you post a link to the HTML in question?

Ultimately you should be able to do:

div {
    margin:0;
    padding: 0;
}

to remove the spacing. Is this just in one particular browser or all of them?