Or just set font-size to 0. That takes away the spaces. And you would of course then need to reset the font-sizes within the blocks.
Great point! Font-size: 0 will do this as well. The reason I left it out is because ir does not work in a lot of Android browsers. Due to that, I haven't ever really bought into that as a solution.
Sometimes the simple solution isn’t as pretty as we would like it to be.
The solutions presented here that don’t involve removing the extra space directly, through comments, or html minification have the potential to be problematic from a maintainability standpoint.
High chance another person will understand this code in the future >> how pretty and elegant the solution looks right now.
I don’t view the other solutions fitting the above criteria.
This is in no way to pick on Jonathan or his solution in particular, but this sort of bikeshedding is common and silly in my opinion. You’re explicitly defining them as inline elements and they are behaving as such.
You make a great point that it would be hard to make any of these solutions scalable. I do think leaving a simple CSS comment to mention why you have margin-right: -4px or font-size: 0 would make them more scalable.
For sure. I agree.
I will say that this is why I like this community so much more than others of its nature. People are cordial, receptive to feedback, and pleasant to each other.
You can also float left for a similar effect. Bonus is that you can center all your floated items together. I use this all the time for centered navigation.
Thanks for the alternative solution!
Yes you could float: left however I typically stay away from this as it is a hackish approach to CSS.
Why do you consider this approach more hackish than the other solutions?
Because floats are a hack when working with them for layout purposes. Floats were never intended to be used to allow you to make block elements align side by side. They were meant to be used for images when wrapping text.
Re: Font-size: 0
The reason that I personally do not like this method is because a lot of Android browsers do not support this method.
More specifically, pre-Jelly Bean browsers have a problem with this.
The -4px magic number works fine in this example but if you bump the font size up or down then it breaks. A better solution was implemented in csswizardry-grids using ems.
It's still a magic number but I've never had an issue with it on dozens of builds.