當設置爲相同寬度時，input和textarea會顯示不同的寬度？

Question

當我將輸入和文本區域的寬度設置爲94％時，它們的寬度看起來略有不同。這是我在很多網站上多次看到的。

任何人都可以解釋爲什麼一個textarea不像輸入寬度設置爲相同的％寬度？

input, textarea { 
    width: 94%; 
} 

Answer 1

1. 不要忘記the box model包括邊框，填充，和利潤率。它們都影響頁面中元素的實際物理寬度。
2. 除非您使用CSS reset，否則您完全可以使用默認瀏覽器樣式表來爲每個元素設置不同的邊框，填充和邊距。

Answer 2

有了CSS3，你也可以使用：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */