input 与 button 的问题 (空隙/不等高/对不齐)及 解决办法
- 1 <!DOCTYPE html>
- 2 <html lang="en">
- 3
- 4 <head>
- 5 <meta charset="UTF-8">
- 6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
- 7 <title>Document</title>
- 8 <style>
- 9 * {
- 10 padding: 0;
- 11 margin: 0;
- 12 }
- 13 input {
- 14 width: 180px;
- 15 height: 40px;
- 16 border: 1px solid #008c8c;
- 17 }
- 18
- 19 button {
- 20 width: 50px;
- 21 height: 40px;
- 22 background: inherit;
- 23 border: 1px solid black;
- 24 /* box-sizing: content-box; */
- 25 }
- 26 </style>
- 27 </head>
- 28
- 29 <body>
- 30 <input type="text"><button>按钮</button>
- 31 </body>
- 32
- 33 </html>