htmlcsssassless

Form border creates space around inner elements

I'm trying to create a simple bordered form that has a button and input of type="text" inside of it.

There is this spacing that appears that I cannot remove.

enter image description here

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>

Solution

  • there is a way around it; it seems... outline instead of border