[duplicate] display: inline-block additional margin

Problem

I’m dealing with a couple divs that have a specified height and width and are set to display: inline-block. If there is a line break after each div in HTML, a 5px margin is automatically added to the right and bottom of the div.

Example:

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

Is there a property I’m missing that will allow me to disable the automatic margin?

Update

There is no way to eliminate the margin from what I’ve found… unless you have everything on the same line or use comments to comment out the line breaks. example:

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

If you have numerous lines, this isn’t the best approach, but it’s still easier to read.

Asked by mike

Solution #1

Inline items are affected by white space.

This should not be surprising. With span, strong, and other inline components, we see it all the time. To remove the additional margin, reduce the font size to zero.

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

As a result, the example would look like this.

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

This is a jsfiddle version of it. http://jsfiddle.net/QtDGJ/1/

Answered by Darwin

Solution #2

Inline-elements are used to treat the divs. A gap between inline-blocks is created in the same way as a space or line-break between two spans does. You might set word-spacing: -1; on the surrounding container or give them a negative margin.

Answered by Daniel

Solution #3

A year later, I came across this query for an inline LI problem and discovered a fantastic solution that may be applicable here.

CSS display: inline-block: why it rocks, and why it sucks

In all browsers, using vertical-align:bottom on all my LI elements fixed my “excess margin” problem.

Answered by Ben

Solution #4

to parent container font-size: 0

(Source: https://twitter.com/garand/status/183253526313566208)

Answered by optimiertes

Solution #5

Float: left;: is a cleaner technique to remove those spaces.

HTML:

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

CSS:

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

It’s supported by all of the latest browsers. I’ve never understood why, back when IE was king, so many developers didn’t make sure their sites worked well with Firefox/Chrome, but now that IE is down to 14.3%, they do. Regardless, despite the fact that IE-9 isn’t supported, I didn’t have many problems with it; for example, the above sample works perfectly.

Answered by Kuf

Post is based on https://stackoverflow.com/questions/1833734/display-inline-block-extra-margin