即使应用 none，输入和按钮仍有边距 - html css

Question

我试图在按钮旁边放置一个输入，即使我已经删除了所有边距，元素之间仍然存在间隙。

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

我已经在 Google chrome 和 Firefox 上以及在 jsFiddle 中对此进行了测试。我每次都得到相同的结果。

Answer 1

将 display: flex 添加到 input/button 容器中，如下所示

郑重声明，我不会设置 id 样式，而是添加 class。

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>

即使应用 none，输入和按钮仍有边距 - html css

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

html

css

margin