display inline-block remove white space gap tutorial

9/29/2013

The below code shows how to remove the white space gap with CSS when using display inline-block. Alternatively, you can simply remove all white space in the HTML to remove the gap as well. Or of course, not use display inline-block, and float it instead.

HTML

<div class="wrap">
   <div class="box red"></div>
   <div class="box green"></div>
   <div class="box blue"></div>
</div>

CSS

.wrap {
display:table; /* Webkit Fix */
width:100%;  /* set width to stop display table shrink to fit */
word-spacing:-1em;  /* hide whitespace nodes (not in webkit) - will never overlap even if zoomed */
}
.box {
display:inline-block;
height:200px;
width:300px;
word-spacing:0;  /* reset parent */
}

Credit

ADVERTISE HERE