Html 删除堆叠的上下框之间的间隙

我在这里创作了一把小提琴：

这是一个动态网页。根据用户的不同，它们可能是4个集合（如示例中所示）或13个集合（在正方形上=一个集合）。图像和收藏标题的高度可能会有所不同。因此，箱子的高度会有所不同，在第二排，我在上面的收集和下面的收集之间有一个间隙，而我希望箱子之间的空间保持均匀；比如说25px。 谢谢你的帮助

HTML:

---

你需要像砖石（）这样的东西来做你想做的事情，因为高度的差异，没有其他方法可以很好地完成它。包装纸是破坏它的东西

---

也许另一个想法是为每一列而不是每一行创建包装器。

您指的是由

产生的20px间隙。collection\u bookmars\u container

上边距为20px吗？@MarcAudet OP说他们想要一个小间隙。我想OP希望它像Windows Live Tiles一样，但对于一些spacingI来说，利润很小，我想我知道发生了什么。这些箱子的高度是最低的一行。他希望所有盒子之间的距离保持一致。我最近遇到了这个问题，并使用了一个名为Mashine的javascript插件来帮助解决这个问题。我想知道是否有一个css专用的解决方案。与其尝试创建自己的模块化系统，不如看看Twitter的引导？@Alexander谢谢，我会去看看的——不过。。。我现在根本不知道JS谢谢David，正如我在评论中提到的，我现在对JS一无所知！因此，我们将尽快研究JS解决方案！

    <div class="collection_bookmars_container">
        <img class="collection_random_image" src="http://img.foodnetwork.com/FOOD/2012/05/04/FNM-060112_NTD-Hot-Dog-Sandwich_s4x3_lg.jpg">
        <div class="collection_bookmark_title_container">
            <span class="collection_bookmark_title">Thai favorites</span>
        </div>
        <div class="modify_collection_container">
            <span class="number_of_articles">1</span>
            <span class="article_text_only">articles</span>
            <img class="icon_modify_collection" src="http://www.mricons.com/store/png/124258_43263_128_monotone_pen_write_icon.png">
        </div>
    </div>

    <div class="collection_bookmars_container">
        <img class="collection_random_image" src="http://img.foodnetwork.com/FOOD/2013/07/19/FNM_090113-Name-This-Dish-Stacked-Salad-Recipe_s4x3_lg.jpg">
        <div class="collection_bookmark_title_container">
            <span class="collection_bookmark_title">Best France food stuff</span>
        </div>
        <div class="modify_collection_container">
            <span class="number_of_articles">1</span>
            <span class="article_text_only">articles</span>
            <img class="icon_modify_collection" src="http://www.mricons.com/store/png/124258_43263_128_monotone_pen_write_icon.png">
        </div>
    </div>
    <div class="collection_bookmars_container">
        <img class="collection_random_image" src="http://img.foodnetwork.com/FOOD/2012/05/04/FNM-060112_NTD-Hot-Dog-Sandwich_s4x3_lg.jpg">
        <div class="collection_bookmark_title_container">
            <span class="collection_bookmark_title">Snacks</span>
        </div>
        <div class="modify_collection_container">
            <span class="number_of_articles">1</span>
            <span class="article_text_only">articles</span>
            <img class="icon_modify_collection" src="http://www.mricons.com/store/png/124258_43263_128_monotone_pen_write_icon.png">
        </div>
    </div>
    <div class="collection_bookmars_container">
        <img class="collection_random_image" src="http://www.secondhomemalaysia.co.uk/uploads/Food3.jpg">
        <div class="collection_bookmark_title_container">
            <span class="collection_bookmark_title">Soups and veloutes</span>
        </div>
        <div class="modify_collection_container">
            <span class="number_of_articles">1</span>
            <span class="article_text_only">articles</span>
            <img class="icon_modify_collection" src="http://www.mricons.com/store/png/124258_43263_128_monotone_pen_write_icon.png">
        </div>
    </div>

body
{
    background-color: #ECF0F1;
}


.container
{
    max-width: 550px;
    width: 100%;
    margin: 0px auto;
    position: relative;
}


.table_presentation_two_column
{
    height: auto;
    display: table;
    width: 100%;
    margin: 0 auto;
}

.collection_bookmars_container
{
    height: auto;
    background-color: white;
    display: inline-block;
    vertical-align: top;
    width: 46%;
    box-sizing: border-box;
    margin: 20px 2% 0% 2%;
}

.collection_random_image
{
    margin-bottom: 10px;
    width: 100%;
}


.collection_bookmark_title_container
{
    margin: 30px 4% 0px 4%;
}


.collection_bookmark_title
{
    font-family: "Roboto Slab","serif";
    font-size: 30px;

}

.modify_collection_container
{
    margin-top: 10px;
    margin: 20px 4% 0px 4%;
    padding-top: 15px;
    border-top: 3px solid #EBEBEB;
    width: 92%;
}

.number_of_articles
{
    font-size: 16px
    font-family: "Montserrat";
    padding-bottom: 4px;
    color: #AFAFAF;
    font-weight: bold;
}

.article_text_only
{
    font-size: 16px;
    font-family: "Montserrat";
    padding-bottom: 4px;
    color: #AFAFAF;
    font-weight: bold;
}

.icon_modify_collection
{
    float: right;
    position: relative;
    overflow: hidden;
    width: 12%;
    max-width: 250px;
    padding-bottom: 10px;
    margin-top: -5;
}