近來，在寫input表單時候，忽然發現一個問題，那就是：雖然input可以設置寬高，在設置width和height相同時，當type類型不同，其對應的寬高效果也完全不一致，先上代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<style type="text/css" rel="stylesheet">
div, input {
width: 300px;
height: 200px;
padding: 20px;
margin: 20px;
border: 10px red solid;
text-align: center;
font-size: 36px;
}
</style>
</head>
<body>
<div>DIV</div>
<input type="button" value="button">
<input type="submit" value="submit">
<input type="text" value="text">
<input type="password" value="password">
</body>
</html>
剛開始，我以爲四種形式的input的大小是一樣的，但是經過驗證後，發現效果並不完全相同，type="button"和type="submit"效果一樣， type="text" 和type="password"效果一樣，先上圖：
很明顯，可以看出類型爲“button”和“submit”時，看起來要小很多，調試網頁時，其效果是這樣的，當input類型“button”和“submit”時：
當input類型“text”和“password”時：
所以，當input 類型爲"button"和type="submit"，設置的 width="實際看到的大小"+padding+border;當input 類型爲"text"和type="password"，實際看到的大小=width+padding+border;
在chrome ff sarafi ie中實驗效果一樣。僅作爲css小技巧，記下備用。
