CSS Foundation 清除默认边距以加入对象

【问题标题】：CSS Foundation clearing default margin to join to objectsCSS Foundation 清除默认边距以加入对象
【发布时间】：2015-06-03 16:43:46
【问题描述】：

我想将文本框和按钮连接在一起，没有任何空格IN BETWEEN 它们在 Foundation-Zurb 框架中。我已经从所有内容中删除了边距。

<style>
    .margin-top{
    margin-top: .7em;
}

.margin-top div input[type="text"] {
    height:2em;
}

.button-height {
    width:5em;
    padding:.3em;
}
</style>
<body>

    <div class="row margin-top">

        <div class="small-7 columns">   
            <img src="http://placehold.it/220x67">
        </div>

        <div class="small-3 columns no-margin">
            <input type="text" class="input-small no-margin">
        </div>

        <div class="small-2 columns no-margin">
            <button class="button-height no-margin">search</button>
        </div>

    </div>  <!-- end-of-ROW1 -->


</body>
</html>

【问题讨论】：

标签： html css margin zurb-foundation-5

【解决方案1】：

在基础中，每一列的左侧和右侧都有填充。因此，您所看到的是创建该空间的列的左右填充的结果。您将不得不覆盖列填充。首先，围绕要从中删除填充的代码部分创建一个独特的包装器。这很重要，因此您不会从页面上的每一列中删除列填充。然后，选择该 div 包装器中的列类以从该部分中删除列填充。

CSS：

.unique-div-name .columns {
    padding-left: 0;
    padding-right: 0;
}

HTML：

<div class="row margin-top unique-div-name">

    <div class="small-7 columns">
        <img src="http://placehold.it/220x67">
    </div>

    <div class="small-3 columns no-margin">
        <input type="text" class="input-small no-margin">
    </div>

    <div class="small-2 columns no-margin">
        <button class="button-height no-margin">search</button>
    </div>

</div>

【讨论】：