Why is there a gap between those 2 divs

Question

Between both columns is a little gap.From where is that gap coming I have set nothing?

Has this todo something with the display:inline-block on those elements? Do they have internal margin?

  <div id="wrapper" style="margin:auto;background-color:yellow;height:100%;">
      <div style="width:50px;height:100%;">
        <div class="fluid-column" style="height:80%; background-color:green;">
          <div style="background-color:#ff99cc; height:25%;">1</div>
          <div style="background-color:#ff33cc; height:50%;">2</div>
          <div style="background-color:#ff66cc; height:25%;">3</div>
        </div>
        <div class="fix-column" style="height:20%; background-color:violet">
          <div style="background-color: orange;height:50%;">Total</div>
          <div style="background-color: blue;height:50%;">Test</div>
        </div>
      </div>
    </div>

body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
div {
    text-align:center;
    text-indent:-0.5em;;
}
div span {
    display:inline-block;
    height:100%;
    vertical-align:middle;
    width:0;
}

Have a read through http://css-tricks.com/fighting-the-space-between-inline-block-elements/ for solutions. It's the whitespace in your source between the `
`s — andyb, Jun 17 '13 at 10:54

Andrew · Accepted Answer · 2013-06-18T09:58:01.383

1

As the elements are inline they are treated as such, including spaces due to white space.

Try removing the white space between the elements (including new lines).

<div>Content</div><!-- this white space/new line causes the gap -->
<div>Content</div>

<div>Content</div><div>Content</div><!-- no new line/white space, no gap-->

You can also add this to the container element to adjust:

word-spacing: 0;

alternatively you can just use floated elements :)

see here, works as expected if you just remove the whitespace: http://jsfiddle.net/D9gnP/121/

edited Jun 18 '13 at 09:58

answered Jun 17 '13 at 10:58

Andrew

12,617
1
34
48

word-spacing did not help me, but font-size:0px; on the surrounding wrapper. I do not like that I have to layout my divs in a certain way so I will use font-size:0px; – HelloWorld Jun 17 '13 at 11:16
you don't even need to use that if you use the first method and remove the whitespace, check the example.. :) – Andrew Jun 17 '13 at 11:28
hell of a crap... For the first div and its children I put all on a line: http://jsfiddle.net/D9gnP/207/ but still the gap is there. What do I wrong? – HelloWorld Jun 17 '13 at 21:38
you removed the gaps in the wrong place, you need to remove the gap on the column divs, like this: http://jsfiddle.net/D9gnP/209/ – Andrew Jun 18 '13 at 07:07

score 0 · Answer 2 · answered Jun 17 '13 at 10:56

I think the whitespaces in your HTML markup - the indents between your tags - get interpreted by the browser. I had similar problems once while designing a horizontal navigation band.

Unfortunately, the only solution I found besides a completely different layout is writing your HTML markup without any whitespaces, which can get quite ugly.

score 0 · Answer 3 · edited May 23 '17 at 11:50

0

It is because of the white space in your HTML. Try removing the break between the two column-divs and it's gone, or try this solution:

How to remove the space between inline-block elements?

edited May 23 '17 at 11:50

Community

1
1

answered Jun 17 '13 at 10:56

Tim Baas

6,035
5
45
72

score 0 · Answer 4 · answered Jun 17 '13 at 11:01

Paste this code for your html:

<div id="wrapper" style="background-color:yellow;height:100%;">
    <div style="width:50px;height:100%;display:inline-block;">
        <div class="fluid-column" style="height:80%;background-color:green;">
            <div style="background-color:#ff99cc;height:25%;"> <span></span>1</div>
            <div style="background-color:#ff33cc;height:50%;"><span></span>2</div>
            <div style="background-color:#ff66cc;height:25%;"><span></span>3</div></div>      
        <div class="fix-column" style="height:20%;background-color:violet">
            <div style="background-color:orange;height:50%;"> <span></span>Total</div>
            <div style="background-color:white;height:50%;"><span></span>Test</div>
        </div>
    </div><div style="width:50px;height:100%;display:inline-block;">
        <div class="fluid-column" style="height:80%;background-color:green;">
            <div style="background-color:#ff99cc;height:25%;"> <span></span>1</div>
            <div style="background-color:#ff33cc;height:50%;"><span></span>2</div>
            <div style="background-color:#ff66cc;height:25%;"><span></span>3</div></div>      
        <div class="fix-column" style="height:20%;background-color:violet">
            <div style="background-color:orange;height:50%;"> <span></span>Total</div>
            <div style="background-color:white;height:50%;"><span></span>Test</div>
        </div>
    </div>
</div>

notice that the 2 divs have nothing in between them in the source code.ex:

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

Why is there a gap between those 2 divs

4 Answers4