表单边框在内部元素周围创建 space

Question

我正在尝试创建一个简单的带边框的表单，其中有一个按钮和其中的 type="text" 输入。

出现了这个间距，我无法删除。

main {
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
}
main form {
  display: flex;
  border: 2px solid green;
}
main form .btndep {
  display: block;
  padding: 10px;
  background: green;
  border: 0;
  box-shadow: none;
  outline: none;
}
main form input {
  border: 0;
  outline: none;
  box-shadow: none;
  text-align: right;
  padding-left: 5px;
  padding-right: 5px;
}

<main>
    <form class="deposit">
        <button class="btndep">Deposit</button>
        <input type="text" placeholder="0.00€">
    </form>
</main>

Answer 1

有办法解决它；似乎...轮廓而不是边框

表单边框在内部元素周围创建 space

Form border creates space around inner elements

html

css

sass

less