remove gap between input and button

Question

I'm trying to put a button right near to a text field.

Here the code I thought would make it work

<input class="txt" type="text" name="name">
<button class="btn">Submit</button>


.txt {
  display: inline-block;
  width: 80%;
  outline: none;
  margin:0;
}

.btn {
  display: inline-block;
  width: 20%;
  margin:0;
}

http://jsfiddle.net/rm9etsny/

However, there is still a gap between the 2 elements. How can I remove it?

Thanks

Answer 1

You can put your html content inline. That will remove the space without having margin-left as negative

<input class="txt" type="text" name="name"><button class="btn">Submit</button>

Also to put them align in a horizontal row, you need to consider giving some less % to input.

Demo - http://jsfiddle.net/RahulB007/rm9etsny/5/

Answer 2

the issue is because inline-blocks give extra spacing between two items you can prevent it by using float:left or adding parent with font-size:0 by using box-sizing:border-box the padding is given from inside

eg

if the input width is 100% and padding is 15px so the total width will be 100% + 15px box-sizing:border-box gives the padding from inside

In my example i have changed the border to outset

demo - http://jsfiddle.net/rm9etsny/11/

body {
    background-color: red;
}
div {
    font-size:0;
}
.txt {
    display: inline-block;
    width: 80%;
    font-size: 2em;
    outline: none;
    padding: 15px;
    margin:0;
    box-sizing:border-box;

}
.btn {
    display: inline-block;
    margin: 0;
    outline: 0 none;
    padding: 0;
    width: 20%;
    box-sizing:border-box;
}

<div>
    <input class="txt" type="text" name="name" />
    <button class="btn">Submit</button>
</div>