input type类型与定义的宽高_css中type属性宽高怎么设置-优快云博客

本文探讨了在HTML中设置相同宽度和高度时，不同类型的input元素呈现出的样式差异，通过代码实例展示了按钮、提交、文本和密码输入框的具体表现，并提供了在Chrome和Firefox中的直观效果对比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   近来，在写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"效果一样，先上图：
  ![效果一](https://img-blog.youkuaiyun.com/20160304171430230)
 很明显，可以看出类型为“button”和“submit”时，看起来要小很多，调试网页时，其效果是这样的，当input类型“button”和“submit”时：
 ![效果2](https://img-blog.youkuaiyun.com/20160304170206776)
 当input类型“text”和“password”时：
  ![效果3](https://img-blog.youkuaiyun.com/20160304170234136)

所以，当input  类型为"button"和type="submit"，设置的 width="实际看到的大小"+padding+border;当input  类型为"text"和type="password"，实际看到的大小=width+padding+border;