Forked from Chris Coyier's Pen Ways to handle space between inline-block elements.
A Pen by Captain Anonymous on CodePen.
<h1>Inline-block / white-space bug</h1> | |
original... | |
<ul> | |
<li>one</li> | |
<li>two</li> | |
<li>three</li> | |
</ul> | |
fixed by funky code formatting... | |
<ul> | |
<li> | |
one</li><li> | |
two</li><li> | |
three</li> | |
</ul> | |
fixed by adding html comments... | |
<ul> | |
<li>one</li><!-- | |
--><li>two</li><!-- | |
--><li>three</li> | |
</ul> | |
fixed by CSS margin-right: -4px; (breaks in IE6&7)... | |
<ul class="white-space-fix"> | |
<li>one</li> | |
<li>two</li> | |
<li>three</li> | |
</ul> | |
fixed by omitting the </li> | |
<ul> | |
<li>one | |
<li>two | |
<li>three | |
</ul> | |
fixed with font-size: 0 via: http://twitter.com/#!/garand/status/183253526313566208 | |
<br><br> | |
<ul class="zero-size"> | |
<li>one</li> | |
<li>two</li> | |
<li>three</li> | |
</ul> | |
<br> | |
flexbox | |
<br> | |
<ul class="flexbox"> | |
<li>one</li> | |
<li>two</li> | |
<li>three</li> | |
</ul> |
body { | |
font-family: sans-serif; | |
font-size: 16px; | |
padding: 5px 20px; | |
} | |
ul { | |
list-style: none | |
} | |
li { | |
background: slategrey; | |
display: inline-block; | |
/* inline block hack for IE 6&7 */ | |
zoom: 1; | |
*display: inline; | |
padding: 4px; | |
color: white | |
} | |
ul.white-space-fix li { | |
margin-right: -4px; | |
} | |
ul.zero-size { | |
font-size: 0px; | |
} | |
ul.zero-size li { | |
font-size: 16px; | |
} | |
ul.flexbox { | |
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ | |
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ | |
display: -ms-flexbox; /* TWEENER - IE 10 */ | |
display: -webkit-flex; /* NEW - Chrome */ | |
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ | |
} |
Forked from Chris Coyier's Pen Ways to handle space between inline-block elements.
A Pen by Captain Anonymous on CodePen.