Input and button have a margin even though none is applied - html css

Question

I am trying to place an input next to a button and even though i have removed all margin there is still a gap between the elements.

#searchButton {
  height: 2em;
  width: 2.4em;
  color: #fff;
  background-color: #71b066;
  border: 0;
  margin-left: 0px !important;
  margin-right: 0px !important;
  font-size: 1.2em;
  cursor: pointer;
}

#searchBox {
  height: 2em;
  width: 15em;
  margin-right: 0px !important;
  font-size: 1.2em;
  padding-left: 1em;
  border: 1px #dbdada solid !important;
  background-color: #e5e3e3;
  margin-left: 0px !important;
}

<form id="formBox">
  <input type="search" name="search" id="searchBox">
  <button type="submit" id="searchButton">OK</button>
</form>

I have tested this on Google chrome and Firefox and within a jsFiddle. I get the same result everytime.

StudioTime · Accepted Answer · 2021-09-09T14:22:46.317

2

Add display: flex to the input/button container as show below

For the record, I wouldn't style an id but add a class instead.

Here's a good introduction to flexbox

#searchButton {
  height: 2em;
  width: 2.4em;
  color: #fff;
  background-color: #71b066;
  border: 0;
  margin-left: 0px !important;
  margin-right: 0px !important;
  font-size: 1.2em;
  cursor: pointer;
}

#searchBox {
  height: 2em;
  width: 15em;
  margin-right: 0px !important;
  font-size: 1.2em;
  padding-left: 1em;
  border: 1px #dbdada solid !important;
  background-color: #e5e3e3;
  margin-left: 0px !important;
}

#formBox {
  display: flex;
}


/* flex is your friend! */

<form id="formBox">
  <input type="search" name="search" id="searchBox">
  <button type="submit" id="searchButton">OK</button>
</form>

edited Sep 09 '21 at 14:22

answered Sep 09 '21 at 14:16

StudioTime

22,603
38
120
207

Thanks but why does adding flex solve this problem? I will accept answer in 5 minutes when SO lets me. – David Benz Sep 09 '21 at 14:19
Read up about it, it's too much to explain here how it works - I've added a link which is a good intro – StudioTime Sep 09 '21 at 14:24
@DavidBenz an introduction to flexbox won't explain your issue, check the duplicate – Temani Afif Sep 09 '21 at 14:25

Input and button have a margin even though none is applied - html css

1 Answers1