inline-block layouts

[Merri]

I don’t know how many of you have experimented with inline-block layouts, but you probably know the huge downfall of having white space awareness between the HTML elements. I want to keep HTML syntax clean so I started to look at possible solutions.

The best way to combat the issue without external resources seems to be word-spacing. It can be used quite well to disable the space between elements, but it has a major downfall of it’s own: whatever value you use, it’ll depend on font in use. For example I found out that the value of -.5625em (or was it -.5265…) to hit the sweet spot with Times New Roman and Arial, but switching font to Verdana broke the layout.

A nice solution to this might be the use of a webfont so you know what will be the exact right value for that particular font, and then just trust that the browser is capable of displaying the font. Which got me thinking a bit further: why not create a font with zero width space?

Test page: http://piittinen.name/html5css3/zerowidth/ (don’t mind the text there)

Unfortunatenaly it seems this **doesn’t work in Chrome**. For whatever reason Chrome doesn’t use the space defined in the ZeroWidth webfont. Firefox and IE seem to work perfectly with this.

Other things that might cross your mind:

1. font-size: 0px; doesn’t work: Chinese Chrome always has a minimum size of 12pt. You don’t want to break your solution only because someone uses a different language.
2. negative margin: harder solution than word-spacing, you don’t want first element of each row to have negative margin for an example. Both use the same value though.
3. Place HTML comments between elements so there can’t be white space: cumbersome.
4. Just write the elements tightly next to each other: visually hard on eyes while writing code, but is the most reliable method.

I’d be interested to see if anyone can get the ZeroWidth font solution to work with Chrome or if any better solution than the #4 on the list above exists.

[Kitty Giraudel]

As far as I can tell, the word-spacing method doesn’t work anymore since WebKit recently changed the way inline-blocks and word-spacing behave (http://trac.webkit.org/changeset/137494).

Issue discussed at Griddle: https://github.com/necolas/griddle/issues/14.
Issue mentioned at the bottom of the readme file of CSSWizadry-grids: https://github.com/csswizardry/csswizardry-grids.

If no mistake the best way so far are negative margin or HTML comments, depending on what you want to edit.

[Merri]

I wonder if Chrome now works incorrectly when it adds spaces between inline-blocks even when the space in the font is zero width? It seems as if it treats the space between the inline-blocks to be of the same font as in the inline-block. Guess I need to test more when I have the time.

[Paulie_D]

Inline-block menu using font-size:0 in UL–>

http://codepen.io/Paulie-D/pen/rstlo

Works fine in Chrome.

[Merri]

The problem is that different locales have different default settings. As far as I know Chinese Chrome forces minimum font-size of 12pt and you can’t override it via CSS.

[Paulie_D]

Then I guess you are limited to floats, unless….

http://www.fyianlai.com/2012/01/google-chrome-minimum-font-size-issue/

[Merri]

Thanks for that. Then I guess to keep things consistent a globally working method for removing the white space would be:

.inline-block-container {
font-size: 0;
-webkit-text-size-adjust: none;
}

.inline-block {
font-size: medium;
-webkit-text-size-adjust: auto;
}

This ought to always work unless there are other browsers that go ahead and force a minimum font-size? Of course adding the zero width font trick would give a double security.

[joshuanhibbert]

I almost always use margin-right: -.25em;

[TheDoc]

It’s not the prettiest, but I really like using comments for this.

Something

Another Div

A shame it works so well, really, because it’s ugly as hell.

[chrisburton]

I use the method that @Paulie_D mentioned above. Just setting a `font-size: 0;` to the parent. That eliminates the extra (and ugly – @TheDoc) markup in your code while also removing the extra whitespace.

[Paulie_D]

I’m surprised at the comment from @joshuanhibbert …because he turned me on to inline-block in the first place.

http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/

[Merri]

I did a test page: http://cdpn.io/wyasd

You can change stuff there by clicking radio and check boxes. These reveal that margin-right: -.25em; is not suitable automatically and you need to vary the value depending on which font you use. It is also potentially risky on bigger projects as simple changes such as changing the font or manipulating HTML code to remove white space (it could happen!) cause margin-right based solution to break. For personal projects it is safe enough, I think.

font-size: 0; is much more reliable. There are still some slight oddities between browsers and this particular example is very hard on Opera. I always succeed in finding the weaknesses of Opera so nothing new here: just don’t make things as complex as I have done on that page and it is probably OK on most sites :)

[chrisburton]

Both font-size solutions work for me in Chrome.

[Paulie_D]

>Both font-size solutions work for me in Chrome.

Ditto

[Merri]

I added word-spacing: .25em; to the examples. It has the advantage over margin-right that the HTML syntax can be pretty much anything. The value still depends on font though so that is a weakness over the font-size solution.

The Chrome issue only displays on Chinese (or other Far East Asian) locale. For me it wasn’t enough to switch the language to Chinese, I guess I’d need to be running Chinese OS to give it a true test myself.

[Author]

Posts