Skip to content

Instantly share code, notes, and snippets.

@kapitancho

kapitancho/inline-block.html

Created July 19, 2012 13:48
Show Gist options
  • Save kapitancho/3144046 to your computer and use it in GitHub Desktop.
Save kapitancho/3144046 to your computer and use it in GitHub Desktop.
Download ZIP
Cross-browser use of inline-block with spacing issues resolved for any font-family and font-size
Raw
inline-block.html
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
padding: 0;
font-size: 15px;
font-family: Arial;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
.ib {
background: green;
margin: 5px;
word-spacing: -1px;
font-size: 1%;
text-align: center;
}
.ib * {
word-spacing: normal;
font-size: 10000%;
display: inline-block;
margin: 1px;
background: pink;
padding: 10px;
vertical-align: middle;
}
ul.ib * {
*zoom: 1;
*display: inline;
}
.vafla {
width: 400px;
height: 45px;
}
</style>
</head>
<body>
<div class="ib">
<a href="#">ABC</a><a href="#">ABCDEF</a><a href="#" class="vafla">ABCDEFGHI</a><a href="#">ABCDEF GHIJKL</a><a href="#">ABCDEFGHIJKLMNO</a>
</div>
<div class="ib">
<span>ABC</span><span>ABCDEF</span><span class="vafla">ABCDEFGHI</span><span>ABCDEF GHIJKL</span><span>ABCDEFGHIJKLMNO</span>
</div>
<div class="ib">
<span>ABC</span>
<span>ABCDEF</span>
<span class="vafla">ABCDEFGHI</span>
<span>ABCDEF GHIJKL</span>
<span>ABCDEFGHIJKLMNO</span>
</div>
<ul class="ib">
<li>ABC</li>
<li>ABCDEF</li>
<li class="vafla">ABCDEFGHI</li>
<li>ABCDEF GHIJKL</li>
<li>ABCDEFGHIJKLMNO</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment