许多盒子（div元素），它们之间有一个空格

Question

我有很多盒子（div）有不同的尺寸 以下是有关问题的截图：

我的代码：

HTML

<div id="categories_container">
    <div class="main_category">
        <div class="categories_title"><a href="#"> <img src="template/images/image.png" alt="" /><h2> Title </h2></a>

            <div style="clear:both;"></div>
        </div>
        <ul>
            <li> <a href="#" title=""> item </a> 
            </li>
        </ul>
    </div>
</div>

CSS

div#center_container {}
div#categories_container {width:65%; margin:5px; float:left;}
div.main_category {width:197px; float:right; margin:0 10px 10px 0;}
div.categories_title img {float:right; margin-left:5px}
div.categories_title h2{float:right; font-size:20px;}
div.main_category ul {list-style-type:none; margin:0; padding:0}
div.main_category ul li {margin: 0 0 .2em 0;}
div.main_category ul li a{color:#6E6B64; font:normal 18px tahoma; display:block; background-color:#f4f4f4; padding: .2em .3em;}
div.main_category ul li a:hover {color:#F37020; background-color:#e7e7e7;}

我希望每个盒子之间没有空格，无论每个盒子的大小如何。

Answer 1

如果要删除不需要的空格，可以创建三个容器并放置类别

<强> HTML

<div id="categories_container">
    <div class="col col1">
      <div class="category">cat</div>
      <div class="category">cat</div>
    </div>
    <div class="col col2">
      <div class="category">cat</div>
      <div class="category">cat</div>
    </div>
    <div class="col col3">
      <div class="category">cat</div>
      <div class="category">cat</div>
    </div>   
</div>

<强> CSS

.col {
   width: 33%;
   float: left;
}

#categories_container {
   overflow: hidden;
}

DEMO

Answer 2

更改此

div.main_category {width:197px; float:right; margin:0 10px 10px 0;}

到

div.main_category {width:197px; float:right; margin:0 10px 0 0;}

保证金：最右下方

Answer 3

包裹顶行的#categories_container或其他类正在为行设置定义的高度。你检查过了吗？