切图布局知识点（一）
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>
代码会发现两个按钮超宽自动换行，然后审查元素发现没有问题，后来请教大神才知道原来是两个按钮之前回车符造成的原因
解决方法：
方法一：在.main中加入font-size:0;
方法二：除去两个按钮代码之间的换行符
方法三：使用float直接浮动
