display: inline-block extra margin

Question

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

-mike

Hello!

I'm working with a few div's 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?

Thanks!

Answer 1

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?

Answer 2

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 3

The divs are treated as inline-elements. Just as a space or line-break between two spans would create a gap, it does between inline-blocks. You could either give them a negative margin or set word-spacing of a surrounding container to -1em.