White-space and newline between inline-block elements taking up space

Question

I wrote a page with flex columns using 'display:inline-block' as in this demo, but met a problem with white-spaces and newlines:

Even though .left and .right are both width:50%, but since there are white-spaces and a newline between them, they actually take up more than 100% width and so .right just goes to next line.

<!--demo 1-->
<div class="container">
    <div class="left box">
    </div>
    <div class="right box">
    </div>
</div>

Deleting white-spaces and newlines between .left and .right works, and now they are on the same line, but the HTML is less expressive.

<!--demo 2-->
<div class="container">
    <div class="left box">
    </div><div class="right box">
    </div>
</div>

So, anyway to keep indents?

You can float the divs instead of inline-blocking them, though you'll have to worry about clearing the floats after. — Musa, Jul 02 '12 at 03:29

score 3 · Accepted Answer · edited Jul 20 '22 at 13:23

Working Fiddle

Add two classes in CSS:

.lfloat {
    float: left;
}

.clrflt {
    clear: both;
}

Change your HTML code to:

<!--demo 1-->
<div class="container">
    <div class="left box lfloat"></div>
    <div class="right box lfloat"></div>
    <div class="clrflt"></div>
</div>

EDITED

inline-blocking adds a 4px border (due to which it shifts the div to the next line). Hence, float is a more preferred way.

You can see this fiddle that uses display:inline-block:

<html>
    <head>
        <style>
        *{padding:0;margin:0}
        ul#container{width:204px}  //Had to add 4px for extra width
         ul#container li{display:inline-block;height:100px;width:100px;background:#666}
        .left{width:50%}
        .right{width:50%;background:#0ca}
        </style>
    </head>
    <body>
        <ul id="container">
           <li>Left</li>
           <li>Right</li>
        </ul>
    </body>
    </html>

You can read more about these issues at a blog here.

I know floating works, but isn't `inline-box` more modern and flexible? G+ uses `inline-box` for columns too. — OpenGG, Jul 02 '12 at 03:39

White-space and newline between inline-block elements taking up space

1 Answers1

EDITED