- This topic is empty.
May 29, 2012 at 3:24 pm #38267
While working on a project recently, I was faced with the same issue Chris addressed in his April 21st article, “Fighting the Space Between Inline Block Elements.” I read the article and the comments and finding no suitable solution, posted my own comment and a link to a jsFiddle.
I was looking for a solution with no floats, no pixel resetting of fonts, no negative margin calculations for different fonts and/or browsers and which would apply inline-block but remove white space between them universally, unobtrusively and across browsers and platforms. I coded a solution, tested it in the browsers in my arsenal and posted my solution to the comments on the article.
It hasn’t garnered any attention (supportive or critical) and so I thought I’d ask for feedback here. I’m looking for comments on browser compatibility, brevity, and especially any grave oversights on my part — I’d like to use this solution on a current project and would be dismayed to discover any affliction that might have disastrous consequences.May 29, 2012 at 6:52 pm #103635
letter-spacing: -.25em;on the parent element is sufficient: http://jsfiddle.net/joshnh/4s7R6/
Also, with your current technique, you are actually causing the elements to overlap slightly.May 29, 2012 at 8:40 pm #103637
Thanks for your feedback. Negative letter spacing was not a sufficient workaround for the issue as I encountered it. I appreciate your input and had a look at the overlapping elements issue you mentioned.
I was able to reduce my code (for my purposes) to these lines:
That solved the issue in all my target browsers. Fiddle with it if you like — (Note: the IE-specific code was moved to a separate IE-targeted stylesheet).May 29, 2012 at 8:51 pm #103638
@MacNimble Any particular reason why are you declaring
display: table;? Also, no need to declare a unit alongside a value of 0 (i.e.
font-size: 0;is suffiecient).
I almost always use font-size trick myself.May 29, 2012 at 9:00 pm #103640
I put “font-size: 0rem” in because I only want browsers that recognize rem to apply the size. Since I am restoring it with font-size: 1rem in the next rule, it seemed logical to enforce it in the first rule as well. I am using display: table to target Safari which won’t respect font-size: 0 for inline-block styled elements.May 29, 2012 at 9:03 pm #103639May 29, 2012 at 9:08 pm #103642May 29, 2012 at 9:16 pm #103643
- The forum ‘CSS’ is closed to new topics and replies.