Inline-block white space fix not working

Question

I am trying to create "floating" columns using inline blocks (as I am sick of floating left with clearfix). Everywhere I read, a way to get rid of the white space with inline blocks is to use word-spacing : -4px or negative margin of -4px. But, for me -4px is not fixing the issue. Why is that?

See tiny white space visible in Chrome at 100% browser zoom:

See random spaces at 110% zoom

My html is:

<div class="row">
        <div class="col1">col 1</div>
        <div class="col1">col 1</div>
        <div class="col1">col 1</div>
        <div class="col1">col 1</div>
        <div class="col1">col 1</div>
        <div class="col1">col 1</div>
    </div>

CSS:

.content-wrap {word-spacing : -4px;}
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13, .col14, .col15, .col16, .col17, .col18 {
    display: inline-block;
    vertical-align: top;
    background-color:#eee;
    padding:0;
    margin:0;
}

.col9 {width: 50%;}

EDITED : Potential solutions: -5px fixes, but I am not sure what new issues that would introduce.

Answer 1

Inline-block: whitespace surrounding inline-block elements becomes relevant, it behaves just like text.

I suggest three solutions to overcome this issue(probably there are more):

1)Solution using float: left instead of display: inline-block

 .content-wrap { word-spacing: -4px; } .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13, .col14, .col15, .col16, .col17, .col18 { display: inline-block; vertical-align: top; background-color: #eee; padding: 0; margin: 0; font-size: 16px; } .col9 { width: 50%; } .row{ font-size: 0; } 

 <div class="row"> <div class="col1">col 1</div> <div class="col1">col 1</div> <div class="col1">col 1</div> <div class="col1">col 1</div> <div class="col1">col 1</div> <div class="col1">col 1</div> </div> 

2)Solution using font-size: 0 to parent and desire to child:

 .content-wrap { word-spacing: -4px; } .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13, .col14, .col15, .col16, .col17, .col18 { display: inline-block; vertical-align: top; background-color: #eee; padding: 0; margin: 0; font-size: 16px; } .col9 { width: 50%; } .row{ font-size: 0; } 

 <div class="row"> <div class="col1">col 1</div> <div class="col1">col 1</div> <div class="col1">col 1</div> <div class="col1">col 1</div> <div class="col1">col 1</div> <div class="col1">col 1</div> </div> 

3)Solution using flex :

 .content-wrap { word-spacing: -4px; } .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12, .col13, .col14, .col15, .col16, .col17, .col18 { display: inline-block; vertical-align: top; background-color: #eee; padding: 0; margin: 0; } .col9 { width: 50%; } .row { display: flex; 

 <div class="row"> <div class="col1">col 1</div> <div class="col1">col 1</div> <div class="col1">col 1</div> <div class="col1">col 1</div> <div class="col1">col 1</div> <div class="col1">col 1</div> </div> 

Answer 2

Just use a float instead, and you could also clean up your css and select all columns starting with 'col' like so.

div[class^='col'],div[class*='col']{
    float: left;
    vertical-align: top;
    background-color: #eee;
    padding:0;
    margin:0;
}