表單邊框在內部元素周圍創建空間

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

我在您的button上添加了一個margin: 0 ，它似乎正在工作。

 main { display: flex; height: 100vh; width: 100vw; justify-content: center; align-items: center; } main form { display: flex; border: 2px solid green; /* Here is the line I added */ padding:0 } main form.btndep { display: block; padding: 10px; background: green; border: 0; box-shadow: none; outline: none; /* Here is the line I added */ margin:0 } 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 2

有辦法解決它； 看來...輪廓而不是邊框