切图布局知识点（一）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>Document</title>
 6   <style>
 7     *{
 8       border: none;
 9       outline: none;
10       margin: 0;
11       padding: 0;
12     }
13     .main{
14       width: 310px;
15       height: 50px;
16       border: 1px solid red;
17     }
18     .main input{
19       width: 140px;
20       height: 50px;
21     }
22     .main .input{
23       margin-right: 30px;
24     }
25   </style>
26 </head>
27 <body>
28   <div class="main">
29     <input type="button" value="开启" class="input" >
30     <input type="button" value="取消">
31   </div>
32 </body>
33 </html>

View Code

代码会发现两个按钮超宽自动换行，然后审查元素发现没有问题，后来请教大神才知道原来是两个按钮之前回车符造成的原因

解决方法：

方法一：在.main中加入font-size:0;

方法二：除去两个按钮代码之间的换行符

方法三：使用float直接浮动