行內替換元素的行內框高度

font-size和line-height對的行內框沒有任何影響。換句話說，就是這兩個值不論怎麼變也不會影響的垂直位置

但它還是有乙個相對的line-height值，vertical-align的百分比值相對於元素的line-height來計算。

img下外邊距邊界與基線對齊，就是元素的底部與基線對齊，也可以認為的基線就是它的最底部

高度改變不會影響line-height值

行內框高度=height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom;

結果：

type=text, textarea，type=button, 等與文字結合的表單元素

font-size 與 line-height影響其行內框高度，其實質還是裡面的字型在起作用，font-size和line-height都應用到了字型的身上。即使加上寬高限制也是一樣的。

text, textarea等輸入框表單元素因為裡面能輸入文字，其實質還是改變文字字型大小與行高。

其本身高度影響自然也會其行內框高度，height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom;

所以這些與文字結果的表單替換元素，其行內框高度由其本身垂直方向上的高度（包括內容，外邊距，邊距和內邊距）和與之相關的字型的font-size與line-height決定。誰在是誰。

input這種替換元素的baseline並不在元素的底部，所以並不是底部與基線對齊

="提交"

form

body

html

結果：

.btn

當增大字型大小時：

由於文字框的baseline並不在它的底部。所以它並未與文字的底部對齊，才會造成上面的錯位現象。

通過給文字框加 vertical-align: bottom; 可以解決上面的錯位問題

當font-size或者line-height值很大時，即使文字看不見了，但依然會撐起其行內框的高度

所以行內替換元素可以分為兩種，一種是不與文字結合的，一種是與文字結合的

不會文字結合的，行內框高度=height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom;

與文字結合的，如果字型的行高大於height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

則行內框的高度為行高，否則就是垂直方向屬性和。總之就是誰大是誰。