Grow your CSS skills. Land your dream job.

inline-block layouts

  • # March 5, 2013 at 2:59 am

    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.

    # March 5, 2013 at 3:53 am

    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.

    # March 5, 2013 at 4:06 am

    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.

    # March 5, 2013 at 4:28 am

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

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

    Works fine in Chrome.

    # March 5, 2013 at 4:37 am

    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.

    # March 5, 2013 at 4:42 am

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

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

    # March 5, 2013 at 5:10 am

    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.

    # March 5, 2013 at 5:22 am

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

    # March 5, 2013 at 12:02 pm

    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.

    # March 5, 2013 at 12:08 pm

    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.

    # March 5, 2013 at 12:28 pm

    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/

    # March 5, 2013 at 4:41 pm

    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 :)

    # March 5, 2013 at 4:59 pm

    I think I’d prefer something like this instead of comments:

    Something

    >

    Another Div

    Good thinking with the zero width space font, too bad it doesn’t work in Chrome. You might wanna try a font with a space width 1em or something width and use `letter-spacing: -1em;` or margin for that matter?

    # March 5, 2013 at 5:10 pm

    Both font-size solutions work for me in Chrome.

    # March 5, 2013 at 5:40 pm

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

    Ditto

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".