[CSS]行内元素中的表单元素 Input 为何和一般行内元素的表现不太一样？

[abcbuzhiming]

提出这个问题前，我已经找了不少资料，知道 IFC 的概念，至少行级元素有 4 条垂直对齐线，可这还是解释不了我的疑问。这个问题其实很常见，就是很多页面都有的，一和 input 表单和它的说明文字 lable 元素，处于同一行时，双方都垂直居中并且文字表现一致的问题。网上有不少这个问题的解决方案，但是他们都是讲怎么干，没讲清楚原理。
为了尽量降低干扰，我这里仅谈 chrome 最新版浏览器下的表现，不谈其它浏览器的兼容问题。
Dom 元素很简单如下：
<form action="" method="">
<label>请输入姓名:</label><input type="text" name="" id="" value="" placeholder="名"/>
</form>

我现在描述一下我感到困惑的地方：
1.当我给 label 元素和 input 元素加上 border 的时候，可以很明显的看到，input 元素的 border 高度是比 lable 低的。这是第一个困惑，同是行内元素为什么他们的默认高度不一样？
2.进一步观察发现，这两个元素里的字体大小是不同的(我并没有设置字体样式，都是默认)，根据行框的高度是由内容决定的 css 规范，这可能就是为啥它们默认高度不一样的原因。但是问题就是：同是行内元素为什么他们的默认字体大小不一样？
3.于是我给两个元素都设置 font-size: 20px，好了，现在输入到 input 里的文字看上去和外面的 lable 文字是对齐的了。但是新问题又出现了，为啥 placeholder 文字看上去像是往上飘了一些，而且我试验了网上的办法，input::-webkit-input-placeholder，设置对齐啥的都是没用的。

我感到奇怪的是按照 CSS 标准，类型为 text 的 input 元素并不是可替换元素，它的样式也是由 CSS 控制的，为啥它的表现和其它行内元素的表现如此的不一致，默认情况下都不一致。并且，placeholder 的样式设计是从何而来，它是故意被设计的比正常输入文字高度往上飘一些的吗？如何让它表现的和输入文字的样式一致？