Using display: inline-block can leave a gap between items. Because the blocks are treated as inline, any space between the one closing and one opening tag is rendered as one space.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="name" content="Jamie Shaw" />
<meta http-equiv="description" content="" />
<meta http-equiv="keywords" content="" />
<title></title>
<style type="text/css">
.container
{
background-color:black;
font-size:0;
}
.container * {font-size: small; word-spacing: normal;}
.block
{
height:300px;
width:300px;
background-color:aqua;
margin-left:0;
margin-right:0px;
display: inline-block;
}
</style>
</head>
<body style="">
<div class="container">
<div class="block">sdf</div>
<div class="block" style="background-color:green;"></div>
</div>
</body>
</html>
Workarounds
- Use float:left rather than display:inline-block if it works with the rest of the layout.
- Make sure there is no space in the source code between the one div and the next.
- Add
font-size:0;
on the container. Be sure to set it back to something sensible on the content. Not ideal!
- Add
word-spacing:-1em;
on the parent works (set
word-spacing:normal;
on the tags within). Only works in Firefox.
Jamie Shaw 