A Space between Inline-Block List Items

Question

Possible Duplicate    Unwanted margin in inline-block list items   How to remove    Invisible space    from HTML       Why do the inline-block list items have a space in them  No matter how I make my list items into a menu  I always get spaces    x000D   x000D  li   x000D    border  1px solid black  x000D    display  inline-block  x000D    height  25px  x000D    list-style-type  none  x000D    text-align  center  x000D    width  50px  x000D    x000D  ul   x000D    padding  0  x000D    x000D   lt ul gt  x000D       lt li gt One lt  li gt  x000D       lt li gt Two lt  li gt  x000D       lt li gt Three lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

Solution   ul       font-size  0     ul li       font-size  14px      display  inline-block      You must set parent font size to 0

User · Answer

I had the same problem  when I used a  inline-block on my menu I had the space between each  li  I found a simple solution  I don t remember where I found it  anyway here is what I did    lt li gt  lt a href  index html  title  home  class  active  gt Home lt  a gt  lt  li gt  lt  ---- gt   lt li gt  lt a href  news html  title  news  gt News lt  a gt  lt  li gt  lt  ---- gt   lt li gt  lt a href  about html  title  about  gt About Us lt  a gt  lt  li gt  lt  ---- gt   lt li gt  lt a href  contact html  title  contact  gt Contact Us lt  a gt  lt  li gt    You add a comment sign between  each end of  and start of    li   Then the horizontal space disappear  Hope that answer to the question  Thanks

User · Answer

Another solution  similar to Gerbus  solution  but this also works with relative font sizing   ul       letter-spacing  -1em     Effectively collapses white-space      ul li       display  inline      letter-spacing  normal     Reset letter-spacing to normal value

User · Answer

I have seen this and answered on it before    After further research I have  discovered that inline-block is a  whitespace dependent method and  is dependent on the font setting  In this case 4px is rendered   To avoid this you could run all your  lis together in one line  or block  the end tags and begin tags together  like this     lt ul gt           lt li gt               lt div gt first lt  div gt           lt  li gt  lt li gt               lt div gt first lt  div gt           lt  li gt  lt li gt               lt div gt first lt  div gt           lt  li gt  lt li gt               lt div gt first lt  div gt           lt  li gt   lt  ul gt     Example here     As mentioned by other answers and comments  the best practice for solving this is to add font-size  0  to the parent element    ul       font-size  0     ul li       font-size  14px      display  inline-block      This is better for HTML readability  avoiding running the tags together etc   The spacing effect is because of the font s spacing setting  so you must reset it for the inlined elements and set it again for the content within

User · Answer

Actually  this is not specific to display inline-block  but also applies to display inline  Thus  in addition to David Hor  k s solution  this also works   ul       font-size  0    ul li       font-size  14px      display  inline

User · Answer

just remove the breaks between li s in your html code    make the li s in one line only

User · Answer

I would add the CSS property of float left as seen below  That gets rid of the extra space   ul li       float left

User · Answer

Even if its not inline-block based  this solution might worth consideration  allows nearly same formatting control from upper levels    ul     display  table    ul li     display  table-cell       IE8   amp  major browsers compatible Relative fixed font-size independent HTML code formatting independent  no need to glue  lt  li gt  lt li gt

[html] A Space between Inline-Block List Items

Examples related to html

Examples related to css

Examples related to xhtml