1

Really simple, im trying to make a bar graph. I have 10 items with 6.2% width and 2% padding either side apart from on the first and last. This should equal 100% bit it still pushes the last one over the edge, what have I done wrong?

http://jsfiddle.net/7vdLV/4/

* {
    padding: 0px;
    margin: 0px;
}
.graph {
    width: 100%;
    height: 50px;
    background-color: #eaeaea;
}
.weekbar {
    width: 6.4%;
    margin-left: 2%;
    margin-right: 2%;
    display: inline-block;
    position: relative;
    background-color: #aeaeae;
    vertical-align: baseline;
}
.start {
    margin-left: 0px;
}
.end {
    margin-right: 0px;
}
Jimmy
  • 12,087
  • 28
  • 102
  • 192

3 Answers3

3

The problem is that you are using display: inline-block; to .weekbar which adds a gap between the blocks. This is the default action. To remove the gap add font-size:0; to .graph

Check this demo

James
  • 4,540
  • 1
  • 18
  • 34
1

You may probably think about using float insteed of inline-block elements. there will always be a distance between inline-block elements difficult to control, specially if you are using %.

you can read more about this (and possible solutions) here:

The gap between two inline-block <span> element

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

How to remove the space between inline-block elements?

Community
  • 1
  • 1
Alvaro Menéndez
  • 8,766
  • 3
  • 37
  • 57
1

It is because you are using display: inline-block; If you got white space in your HTML, you get white space in your front end. Delete the white spaces in your HTML.

Example: http://jsfiddle.net/7vdLV/23/

SKeurentjes
  • 1,848
  • 12
  • 18