两个input放一行不能对齐

若两个input都是text属性，并且不设置字号大小，那么两个input可以在一行

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>aa</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    *{margin:0;padding:0;}
    .aa{width: 300px;height: 40px;border:1px solid red;}
    .bb{width: 100px;height: 40px;border:1px solid green;}
</style>
</head>
<body>
    <input type="text" value="aa" class="aa"><input type="text" value="bb" class="bb">
</body>
</html>

若两个input都是text属性，设置字号大小，那么两个input将出现两个不在一行的情况（字号很大的时候）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>aa</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>aa</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    *{margin:0;padding:0;}
    .aa{width: 300px;height: 40px;border:1px solid red;}
    .bb{width: 100px;height: 40px;border:1px solid green;}
</style>
</head>
<body>
    <input type="text" value="aa" class="aa"><input type="button" value="bb" class="bb">
</body>
</html>

原因不知道为什么


    *{margin:0;padding:0;}
    .aa{width: 300px;height: 40px;border:1px solid red;}
    .bb{width: 100px;height: 40px;border:1px solid green;font-size: 34px;}
</style>
</head>
<body>
    <input type="text" value="aa" class="aa"><input type="text" value="bb" class="bb">
</body>
</html>

若两个input不都是text属性，一个是text属性，一个是button属性，input type="button"设置的border不起作用，连个input即使设置高度值一样，但实际高度仍然是不一样的

针对两个行内元素中间出现间隙的bug

http://www.jianshu.com/p/50e6cb9aeed6

两个input放一行不能对齐

推荐阅读