0 Margin And 0 Padding, But Still A Gap? :l

[Cryzabey]

Test LinkI'm having some trouble. I have an X-axis with tick marks beneath it. I've established margins and paddings to be 0, so I don't quiet understand why a gap still exists between the X-Axis and tick marks. Any help would be appreciated. (Problem is consistent throughout all browsers.)

<!--- X-Axis Display Code ---> <div style='width: 886px; margin-top: 2px; padding-top: 2px;'></div> <div style='background: url(bargraph_images/bar.jpg) repeat-x; width: 722px; height: 3px; margin: 0px; padding: 0px;'></div>   <!--- Tick Marks ---> <img style='margin: 0px; padding: 0px;' src='bargraph_images/bar2.jpg' /> <img style='margin: 0px; padding: 0px; margin-left: 114px;' src='bargraph_images/bar2.jpg' /> <img style='margin: 0px; padding: 0px; margin-left: 114px;' src='bargraph_images/bar2.jpg' /> <img style='margin: 0px; padding: 0px; margin-left: 114px;' src='bargraph_images/bar2.jpg' /> <img style='margin: 0px; padding: 0px; margin-left: 114px;' src='bargraph_images/bar2.jpg' /> <img style='margin: 0px; padding: 0px; margin-left: 114px;' src='bargraph_images/bar2.jpg' /> <img style='margin: 0px; padding: 0px; margin-left: 114px;' src='bargraph_images/bar2.jpg' />  <!--- Cash Increments ---> <div style='clear:both; padding:0; margin:0; background:none;'></div> <div style='width: 100%; color: #000000; font-size: 14px;'>  <div style='display: inline-block; float: left; padding-bottom: 5px; width: 60px;'>$0</div><center> <div style='text-align: center; float:left; width:120px; display: inline-block; padding-bottom: 5px;'>$20,000</div> <div style='text-align: center; float:left; width:120px; display: inline-block; padding-bottom: 5px;'>$40,000</div> <div style='text-align: center; float:left; width:120px; display: inline-block; padding-bottom: 5px;'>$60,000</div> <div style='text-align: center; float:left; width:120px; display: inline-block; padding-bottom: 5px;'>$80,000</div> <div style='text-align: center; float:left; width:120px; display: inline-block; padding-bottom: 5px;'>$100,000</div>  <div style='text-align: center; float: left; width:120px; display: inline-block; padding-bottom: 5px;'>$120,000</div></center>  </div>

[Cryzabey]

Nevermind.I removed all of the junk about padding and margin.I then used some position:relative; and top: #px; to achieve what I wanted [:

[chibineku]

Interestingly, this is the third thread this week with the same problem, but the solution hasn't been the same each time.Try putting the tick images in the div that comes before them, and then assigning the div a line height of 3px. That brings them up to touch, but you get a weird problem where the first two ticks are right next to each other...so, not perfect but an idea.Ah, good, you fixed it. Somehow, my solution worked out its little bunching up problem...strange.

[dsonesuk]

wouldn't this be a better solution:<style type="text/css">/*set widths*/.middlebars{width:120px;}.firstbar, .endbar{width:60px;} /*half width of middle bars*/.endbar span{ position: relative; right: -30px;} /* position minus right to centre last cost price*/.firstbar, .endbar, .middlebars{border-top: 3px solid #000; float:left; height: 20px; padding-top: 7px;}.firstbar{ background:url(bar2.jpg) top left no-repeat;}.endbar{ background:url(bar2.jpg) top right no-repeat;}.middlebars{background:url(bar2.jpg) top center no-repeat; text-align:center;}</style><div class="firstbar">$0</div><div class="middlebars">$20,000</div><div class="middlebars">$40,000</div><div class="middlebars">$60,000</div><div class="middlebars">$80,000</div><div class="middlebars">$100,000</div><div class="endbar"><span>$120,000</span></div><div style="clear:both;"></div>