[英]Form border creates space around inner elements
我正在尝试创建一个简单的有边框的表单,其中有一个按钮和 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>
我在您的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>
有办法解决它; 看来...轮廓而不是边框
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.