inline-block spacing

[mdo]

Mention blank spaces and how to deal with those.

[danburzo]

Exactly! Wanted to mention that as well.

Yahoo!'s Pure CSS framework uses letter-spacing: -0.31em to collapse the whitespace in their Grid component, but suffice to say this arbitrary value breaks in a variety of situations (e.g. using web fonts). http://purecss.io/grids/

My new favorite technique for dealing with this outlined here: http://scottkellum.com/2013/10/25/the-new-kellum-method.html

Basically use web font with zero-width glyphs on the wrapper to annihilate the whitespace -- the downside being that you need to reset the font-family on the cells themselves.

[sugarenia]

You can also specify font-size: 0 in the parent element and redefine it for the children. Seems a bit less hacky than negative letter-spacing to me.

[danburzo]

I think (although I haven't tested) font-size: 0 is still broken on Android:
http://codepen.io/stowball/details/LsICH

A suggested workaround is to use a very small value -- e.g. 0.001px http://codepen.io/SelenIT/pen/HIika

[sugarenia]

Good to know, Dan, thanks!

[pageaffairs]

Always bugs me that the best inline-block space removal method (which works right back to IE6) is never listed. It involves the use of word-spacing: http://codepen.io/pageaffairs/pen/BfIun

[sugarenia]

Isn't the display: table that is required for the parent a bit problematic though? You may not always want that.

[danburzo]

@pageaffairs you'll also want to add a width: 100% to the parent in most cases.

[zanona]

Actually, the display: table-cell fix is a good workaround, however, elements will never break to another line in case you want a grid-like layout to adapt with viewport with. Obviously as it happens with tables, it will always try to fit its children inside the given row.

So as long as this is not major concern for your layout, it would be indeed a great idea to use it.

PS. I do like the fact you get all elements with the same height and vertical-align still works while using the “table-cell” workaround.

[zanona]

Another issue might be worth mention is the lack of control over width and margin combinations while using the “table-cell” method. In fact, I haven’t been able to add margins at all while using this method.

[pageaffairs]

@danburzo Normally, a block level parent will have width: 100% by default.

@zanona The example I posted doesn't have a problem with wrapping, though. See here: http://codepen.io/pageaffairs/pen/zclie/ The display: table on the parent just helps to jog webkit-based browsers (and still Chrome, it seems) without creating any other issue, as far as I can see.

This method doesn't require any display: table-cell, so issues with that don't arise. You can place as much margin/padding on the elements you like with display: inline-block: http://codepen.io/pageaffairs/pen/BhnHp/

[zanona]

@pageaffairs wow that’s brilliant. Now I got confused on how I did come with the table-cell idea. Thanks for the heads-up.

[danburzo]

@pageaffairs your current example does have a block level parent, but the display:table property affects how it computes its layout. If that was the case by default, the section in your example would stretch the entire width.