You are correct that the negative margins in this cases is a fragile approach because the actual gap is not known and -10px may not be correct for all. A better strategy is to use negative word-spacing using ems instead as that will never cause an overlap so you can use larger values than you need and will not cause an issue when scaled. However webkit doesn’t get this correct to another method is need for webkit.
Luckily we came up with the solution in one of our famous sitepoint quizzes and here is the complete solution for the whitespace gaps in inline block elements.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<style type="text/css">
html, body {
margin:0;
padding:0
}
.boxwrap {
display:table;/* Webkit Fix */
width:100%;/* set width to stop display table shrink to fit*/
text-align:center; /* center list items*/
word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit) - unlike negative margins words will never overlap even if zoomed*/
}
.box {
display: inline-block;
*display:inline;/* ie6/7 fix*/
*zoom:1.0;/* ie6/7 fix*/
vertical-align:middle;
height: 100px;
width: 200px;
border: 1px solid black;
margin: 0px;
word-spacing:0; /* reset from parent */
}
#red { background-color: red; }
#green { background-color: green; }
#blue { background-color: blue; }
</style>
</head>
<body>
<div class="boxwrap">
<div class="box" id="red"> This is a test</div>
<div class="box" id="green">This is a test</div>
<div class="box" id="blue">This is a test</div>
</div>
</body>
</html>
Unlike other solutions using font-size:0 (bootstrap for example) it does not cause inheritance issues and is much more stable.
to fix a simple, structural flaw in the fundamentals of your code.
I wouldn’t say it was a structural flaw as such but rather an unwanted side behaviour of using inline-block (which in a lot of cases is much more preferable to floating elements.) 