Picnic Website Code Tutorials

display inline-block remove white space gap tutorial

9/29/2013

View Demo

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

Need help adding this or other code to your website? Post it here in the forum! Forum

Sponsors

Top Donators

Friends of Mine