how to remove white space between divs (CSS graph creating)

Question

I have created a graph using CSS but i got some of troubles with inner divs (bar classes). There are white spaces between inner divs. I've tried by using float: left. it can remove white spaces, but inner divs are not adjacent to the bottom of outer div (graph class).

This is an example links (still not remove white space): http://dabblet.com/gist/2779082
Thank you

HTML

<div class="graph">
    <div style="height: 22px;" class="bar"></div>
    <div style="height: 11px;" class="bar"></div>
    <div style="height: 6px;" class="bar"></div>
    <div style="height: 49px;" class="bar"></div>
    <div style="height: 28px;" class="bar"></div>
</div>

CSS

.graph {
    width: 50px;
    height: 50px;
    border: 1px solid #aeaeae;
    background-color: #eaeaea;
}

.bar {
    width: 8px;
    margin: 1px;
    display: inline-block;
    position: relative;
    background-color: #aeaeae;
    vertical-align: baseline;
}

yeah, its works. I wondering i must add html comments tags between close and open div tags. — brendan, Nov 08 '13 at 13:20

score 2 · Answer 1 · answered Nov 08 '13 at 12:43

2

Add

.bar {
    padding:0;
    margin:0;
 }

answered Nov 08 '13 at 12:43

Romain Braun

3,624
4
23
46

score 1 · Answer 2 · answered Nov 08 '13 at 12:51

1

.bar {
    padding:0;
    margin:0;
 }

I am pretty sure that the white place will dissapear but because the border it is going to be another color. it takes 1px from each side of your div.

There always will be a margin between your div.

answered Nov 08 '13 at 12:51

Daan Kleijngeld

1,375
2
10
13

score 0 · Answer 3 · answered Nov 08 '13 at 12:43

0

Add padding: 0px; to your .graph

answered Nov 08 '13 at 12:43

Joren

3,068
25
44

score 0 · Answer 4 · answered Nov 08 '13 at 12:52

0

Just add margin:0; to you bar css, spaces between your graphs are removed..You can see it in the image...

enter image description here

answered Nov 08 '13 at 12:52

Sasidharan

3,676
3
19
37

score 0 · Answer 5 · edited Nov 25 '14 at 15:11

You need to remove the white spaces really between the divs, Try the following instead of

<div class="graph">
    <div style="height: 22px;" class="bar"></div>
    <div style="height: 11px;" class="bar"></div>
    <div style="height: 6px;" class="bar"></div>
    <div style="height: 49px;" class="bar"></div>
    <div style="height: 28px;" class="bar"></div>
</div>

same exactly without spaces between divs

<div class="graph">
    <div style="height: 22px;" class="bar"/>
    <div style="height: 11px;" class="bar"/>
    <div style="height: 6px;" class="bar"/>
    <div style="height: 49px;" class="bar"/>
    <div style="height: 28px;" class="bar"/>
</div>

score 0 · Answer 6 · edited May 23 '17 at 12:28

0

I guess the reply is a bit too late for this quesiton, but the answer might help someone else who has the same problem.

In fact I am not answering this question, the answer is in the link below.

Why is there an unexplainable gap between these inline-block div elements?

edited May 23 '17 at 12:28

Community

1
1

answered Dec 31 '14 at 09:49

Adil

105
1
4
10

how to remove white space between divs (CSS graph creating)

6 Answers6