简体   繁体   中英

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.

在此处输入图像描述

 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>

I added a margin: 0 on your button and it seems to be working.

 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>

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM