0

When using inline-block elements, the whitespace around the element really throws off using it for grid elements. Two elements at 50% can't sit next to each other because of the whitespace.

The best solution to this is doing something like:

    .column {
        display: inline-block;
        vertical-align: top; 
    }

    .grid {
        font-size: 0;

        > * {
            font-size: initial;
        }
    }

    <div class="grid">
        <div class="column w50"></div>
        <div class="column w50"></div>
    </div>

However that causes things to change type size (when sizing type with ems) and those star selectors are a little frowned upon.

Removing the whitespace in the HTML is not really an option, it takes away from the maintainable aspect as other devs need to know to make sure whitespace is removed and it's not so readable. Likewise for the comment trick.

In an ideal world I'd just use flex but IE9 is still a thing.

I could get over the star selector if I can do something that doesn't change the font size of child elements.

EDIT: I understand there is a similar question about how to handle the white space, however this is specifically about a way around the font-size problem. There are tricks to fixing the whitespace, but the above is likely the best as it's not as hacky as comments/negative-margin.

evu
  • 1,031
  • 2
  • 10
  • 29
  • This question is either too broad, opinion based or invites discussion and so is off-topic for Stack Overflow – Paulie_D Nov 04 '15 at 12:35
  • I'd suggest using bootstrap. You can set columns which will sit snugly side by side, and it's responsive too. – Michael Emerson Nov 04 '15 at 12:37
  • @Paulie_D I don't agree. But maybe it has been asked before. – yunzen Nov 04 '15 at 12:37
  • @MichaelEmerson That is not the question. Bootstrap Grid does not use inline-blocks but float instead. And float sucks even more then inline-blocks. – yunzen Nov 04 '15 at 12:38
  • 1
    The question asks for "most maintanable"...that's *entirely subjective* and so opinion based. – Paulie_D Nov 04 '15 at 12:38
  • And what about the magic `margin-left: -4px;` trick? – Steyn Nov 04 '15 at 12:38
  • I prefer `margin-left:-.25em` but that's just me...but, as I said, opinion based....as evidenced by the comments already generated. :) – Paulie_D Nov 04 '15 at 12:41
  • 1
    Possible duplicate of [Inline-block blank space explanation and solution](http://stackoverflow.com/questions/33408727/inline-block-blank-space-explanation-and-solution) – Mr Lister Nov 04 '15 at 12:52
  • The other question lists many solutions. Margin-left won't work reliably, because you need the exact width of 1 space, which may not be .25em. – Mr Lister Nov 04 '15 at 12:55
  • Updated to oppose comments about it being opinionated or a duplicate. The font-size 0 is fine, but it's handling the type within that's then the problem. – evu Nov 04 '15 at 12:59
  • 1
    Oh, [here](http://stackoverflow.com/a/31286562/1016716) is yet another solution: use JavaScript to remove all whitespace nodes inbetween the blocks. Choices abound! Take your pick! – Mr Lister Nov 04 '15 at 12:59
  • 1
    I really liked this solution: http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements#answer-20473553 – yunzen Nov 04 '15 at 13:01
  • @HerrSerker That is the worst case of overkill I saw in a long while. Download an entire font just to remove a space? Geez. – Mr Lister Nov 04 '15 at 13:27
  • @MrLister It's 2kB each font file. This is not an entire font – yunzen Nov 04 '15 at 14:10

1 Answers1

1

While you are using the font-size:0 approach to dealing with the inline-block gaps and because you are worried about the font-size:initial for the child(s) due to the use of ems :

However that causes things to change type size (when sizing type with ems) and those star selectors are a little frowned upon.

you can "solve" this by using rem instead.

see differences between rem,em and px below:

Comprehensive Guide: When to Use Em vs. Rem

Confused About REM and EM?

While em is relative to the font size of its direct or nearest parent, rem is only relative to the HTML (root) font-size

dippas
  • 58,591
  • 15
  • 114
  • 126
  • Was looking into it some more this weekend and settled on rems as a solution too :) The only problem is using it for pseudo elements in IE9 and when using it with the shorthand font poperties, which I never do anyway. Should be safe enough. This technique makes building grid systems almost as good as flex. If only we could float right and maintain inline-block status :) Cheers. – evu Nov 09 '15 at 12:14