How do I remove extra margin space generated by inline blocks?

Question

I am using this css to format two columns but I am still getting margin space between two. I can eliminate it with use of margin-left: -4px; or some such. Is there a more elegant way to do this or is there something wrong with the CSS code?

div.col1{
  display: inline-block;
  min-height: 900px;
  height: 100%;
  width 300px;
  margin: 0px;
  background-color: #272727;
  overflow: hidden;
  border: 1px dotted red;
}

div.col2{
  display: inline-block;
  min-height: 900px;
  height: 100%;

  width: 620px;
  margin: 0px;

  vertical-align: top;
  border: 1px dotted red;
  overflow: hidden;
}

@Pavel: this site works a little different to other forums. When you find a helpful answer, you are supposed to upvote it by clicking in the up arrow next to it. If that question solved your problem, you should click on the bog checkmark next to it and the question will be marked as resolved. No need to add the [Resolved] to the title of the question. Welcome to http://stackoverflow.com/ — Esteban Küber, Nov 26 '09 at 06:05
@Pavel: but you can select an accepted answer by clicking the green checkmark. — Esteban Küber, Nov 27 '09 at 11:43

score 46 · Accepted Answer · answered Nov 26 '09 at 05:05

46

Perhaps you have:

<div class="col1">
    Stuff 1
</div>
<div class="col2">
    Stuff 2
</div>

? If so then this is probably a whitespace problem (it turns out whitespace does matter in html). This should fix it:

<div class="col1">
    Stuff 1
</div><div class="col2">
    Stuff 2
</div>

answered Nov 26 '09 at 05:05

Caleb

9,272
38
30

9

To be more precise - it matters here because the blocks are treated as inline (due to inline-block) – K Prime Nov 26 '09 at 06:13
Nice catch! I wouldn't easily find it. – Dmytrii Nagirniak Nov 26 '09 at 22:02
9

Unfortunately this answer requires altered markup (wasn't that what CSS was supposed to fix? :-/) and won't fork for post-processed/tidied markup (like that generated in ASP.NET WebForms). – Aug 13 '12 at 18:52
1

@user166390 The OP is specifically setting the DIVs to be inline elements, so they're going to behave like inline elements and altered markup is necessary to have them butted against each other with no space (unless you set a negative margin on the 2nd column DIV). CSS isn't going to change how the W3C specs handle inline elements. If you want to accomplish this without altering the markup then you'll need to float the elements to the left. – Gavin Nov 23 '13 at 08:14

score 20 · Answer 2 · edited Feb 27 '13 at 18:31

20

A simple font-size:0 to the parent element will work.

edited Feb 27 '13 at 18:31

andr

15,970
10
45
59

answered Nov 30 '12 at 02:24

Shahen

217
2
2

this has a bug on android – Rami Jamleh Mar 14 '13 at 08:05
it works font size 0 on parent element and then on subelement set to 1.5rem for example – Jacek Pietal Feb 13 '14 at 14:42

score 10 · Answer 3 · answered Nov 17 '12 at 18:58

The elements with attribute inline-block will behave as if they are inline (hence the name), and therefore any whitespace encountered will be treated as a space. For example:

<div></div><div></div>

will be rendered differently to

<div></div>
<div></div>

See a live example here

You can solve this problem using HTML as follows:

Either place all your elements on the same line, i.e.

<div>
    // CONTENT
</div><div>
    // CONTENT
</div><div>
    // CONTENT
</div>

or use HTML comments to remove the spaces

<div>
    //CONTENT
</div><!--
--><div>
    //CONTENT
</div>

You can solve this problem using CSS as follows:

Set the attribute font-size: 0 on the parent, i.e.

parent {
    display: inline-block;
    font-size: 0
}
parent * {
    font-size: 12px
}

or set the attribute zoom: 1 on the parent, i.e.

parent {
    display: inline-block;
    zoom: 1
}

score 7 · Answer 4 · edited Jun 13 '16 at 18:33

7

Alternatively, to fix this without changing the formatting of your source code, you can create an additional element.

If you were doing this in a list it would look like:

<ul >
    <li>
      <a href="#">Solutions Overview</a>
    </li>       
</ul>   


<style type="text/css">             
    ul {word-spacing:-1em;}
    ul li a{word-spacing:0;}
</style>

edited Jun 13 '16 at 18:33

gevorg

4,835
4
35
52

answered Mar 02 '11 at 23:48

am80l

1,511
12
11

score 0 · Answer 5 · answered Nov 13 '12 at 09:07

0

Additionally, some helpful techniques can be found listed here:

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

answered Nov 13 '12 at 09:07

Dalex

3,033
2
30
23

score 0 · Answer 6 · edited Jun 13 '16 at 17:37

0

Making the parent element font-size: 0 will also resolve the issue.

<div class="col-set">
    <div class="col1">
        Stuff 1
    </div>
    <div class="col2">
        Stuff 2
    </div>
</div>

.col-set { font-size: 0; }    
.col-set > div { font-size: 12px; }

edited Jun 13 '16 at 17:37

Andy Hoffman

18,436
4
42
61

answered Jan 24 '14 at 05:39

lpradhap

623
6
17

score 0 · Answer 7 · answered Apr 08 '10 at 16:05

0

apply float:left and that will remove the space so the text doesn't have to be on 1 line.

answered Apr 08 '10 at 16:05

Evan

3,411
7
36
53

2

If only `float:left` didn't have entirely different semantics .. – Aug 13 '12 at 18:53

score -5 · Answer 8 · answered Nov 26 '09 at 05:02

-5

You should also specify:

padding: 0;

answered Nov 26 '09 at 05:02

Dmytrii Nagirniak

23,696
13
75
130

yes, i have dotted red borders showing the element's locations. I've tried firebug, but it does not attribute spacing to any element style. – Pavel Zaitsev Nov 26 '09 at 05:06

How do I remove extra margin space generated by inline blocks?

8 Answers8

Linked