No space between two input fields

Question

I want no space between the input elements. I tried to remove the margin from the button but nothing changed.

.form{
  float: left;
  margin-top:12px;
  margin-left: 30px;
}
.input-search{
  width:300px;
}
.input-search-button{
  margin:0px;
  padding: 0px;
  width: 15px;
  height: 21px;
}

<form class="form" action="" method="get" accept-charset="utf-8">
  <input class="input-search" type="text" name="">
  <input class="input-search-button" type="button" name="">
</form>

i want the two input element to be close without spacing – Oronce SOSSOU Sep 26 '20 at 18:55 — Oronce SOSSOU, Sep 26 '20 at 18:55

score -1 · Answer 1 · 2020-09-26T19:31:07.647

-1

How about using flex on parent element?

.form {
  display: flex;
}

<form class="form" action="" method="get" accept-charset="utf-8">
    <input type="text">
    <input type="button">
</form>

edited Sep 26 '20 at 19:31

answered Sep 26 '20 at 19:15

score -1 · Answer 2 · answered Sep 26 '20 at 19:23

Are you wanting the input fields to stack or be inline? If you want them inline/side-by-side, you can float your input elements. If you use floats, I'd recommend researching clearfix classes if you are unfamiliar.

If you want to stack them, something to keep in mind is that any spaces or line breaks between HTML elements will be rendered based off the font size:

Has Space
--
<div class="block-1">1</div>
<div class="block-2">2</div>

No Spaces
--
<div class="block-1">1</div><div class="block-2">2</div>

Obviously the 2nd HTML option here really isn't preferred, so we can use the following CSS:

.form {
    font-size: 0;
}

.form input {
    font-size: 14px;
}

score -1 · Answer 3 · answered Sep 26 '20 at 19:29

Check this out:

CSS

.form {
  float: left;
  margin-top: 12px;
  margin-left: 30px;
  display: flex;
}
.input-search {
  width: 300px;
  padding-right: 15px;
}
.input-search-button {
  margin: 0px;
  padding: 0px;
  width: 15px;
  height: 21px;
  transform: translateX(-15px);
}

No space between two input fields

3 Answers3