Search code examples
htmlcssmarginzurb-foundation-5

CSS Foundation clearing default margin to join to objects

I want join the text-box and the button together without any space IN BETWEEN them in Foundation-Zurb framework.I have removed margin from everything.

screenshot of the described situation

<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>
Solution

  • In foundation, every column has padding on the left and right. So what you're seeing is a result of the left and right padding of the columns creating that space. You're going to have to override the column padding. First, create a unique wrapper around the portion of your code you want to remove the padding from. This is important so you don't remove the column padding from every column on the page. Then, select the column class inside that div wrapper to remove column padding from that section.

    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>