0

Try this demo

Here you can see from A to V links having more space between borders (left & right) and from w to z you can see my expected output. Why I'm getting more space for A to V links..

Can some one suggest me how to solve it?

I tried everywhere margin and padding as 0 and outline to none. Even after i tried reseting my css, I'm getting some space between lines (border left and right)

G.L.P
  • 7,119
  • 5
  • 25
  • 41
  • 1
    [This](http://jsfiddle.net/r7vz3b4w/5/) may help: http://stackoverflow.com/questions/21875226/space-between-nowrap-inline-blocks/21875532#21875532 – Hashem Qolami Aug 12 '14 at 11:40
  • http://css-tricks.com/fighting-the-space-between-inline-block-elements/ – 4dgaurav Aug 12 '14 at 11:41

1 Answers1

3

As these are inline-blocks elements because of your css, you need to write them like that : 

<ul class="filter">
    <li><a href="#">A</a></li
   ><li><a href="#">C</a></li
   ><li><a href="#">D</a></li
   ><li><a href="#">E</a></li
   ><li><a href="#">F</a></li
   ><li><a href="#">G</a></li
   ><li><a href="#">H</a></li
   ><li><a href="#">I</a></li
   ><li><a href="#">J</a></li
   ><li><a href="#">K</a></li
   ><li><a href="#">L</a></li>
</ul>

The spaces between inline elements are rendered, so, using this "trick" there is no space anymore http://jsfiddle.net/r7vz3b4w/4/

But you could also keep your html unchanged and tell mister css to make them floating with float:left

singe3
  • 2,065
  • 4
  • 30
  • 48
  • Thanks for your answer.. As per the link given by Hashem Qolami , I tried `ul{font-size:0}` and my problem solved.. Thanks for your time once again :-) – G.L.P Aug 12 '14 at 11:55