Question

我是这个网站的新手，也是html和css的初学者。我正在从事个人项目的练习，设计要求输入框和提交按钮的高度为55px，宽度为320像素。这两个包括2px边框和15px填充。我不确定为什么我当前的代码不会产生相同的大小。输入按钮明显小于输入框（宽度和高度）。

任何帮助都将不胜感激。

＆＃13;

body {
  background-color: blue;
}

/* LOGO */

.logo img {
  height: 35px;
  padding: 50px;
  display: block;
  margin: 0 auto;
}

/* FORM */

.form {
  background-color: white;
  width: 400px;
  height: 500px;
  padding: 40px;
  border-radius: 5px;
  margin: 0 auto;
}

h1 {
  font-family: "Courier New", Courier;
  font-weight: normal;
  text-align: center;
  padding: 20px;
}
input[type='email'],
input[type='password'],
button[type='submit']{
  height: 38px;
  width: 303px;
  border: 2px solid gray;
  padding: 15px;
  margin: 15px auto;
  display: block;
  font-size: 15px;
  border-radius: 5px;

}

button {
  background-color: green;
}

span {
  color: white;
}

＆＃13;

<div class="logo">
  <img src="images/logo.png" alt="AnalogSea logo">
</div>

<div class="form">
  <h1>Sign up</h1>
  <form action="/signup" method="post" class="form_section">
    <label class="email button_size" for="email" required>Email</label><br>
    <input placeholder="foo@bar.com" type="email" name="email" id="email"><br>
    <label class="email button_size" for="password" required>Password</label><br>
    <input placeholder="1234passw0rd" type="password" name="password"><br>
    <button type="submit"><span>Sign Up</span></button>
  </form>
</div>

＆＃13;

Answer 1

它发生的原因是在浏览器中呈现box-model的方式。在您的示例中，填充是导致问题的原因。对于按钮，303px中的填充和边框包含，因此该按钮的总宽度为303px。对于<input>元素，填充和边框已添加到总宽度，宽度为337px。

要解决此问题，您可以通过几种方式解决这个问题。您可以全局重置box-sizing（CSS中处理此属性的属性），如：

* { box-sizing: border-box }

或者您可以将其添加到<input>元素。

input[type="whatever"] { box-sizing: border-box }

我个人在全球范围内做重置，以使事情保持一致。这是我的偏好。

如果您这样做，则必须将元素的height重新调整为68px，因为现在填充将被视为height属性的一部分，而不是添加它。

以下是关于箱型的一些解读：http://www.w3schools.com/css/css_boxmodel.asp

以下是对box-sizing媒体资源的一些解读：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

希望这有帮助！

Answer 2

我会改变：

<button type="submit"><span>Sign Up</span></button>

到

<input type='submit' value='Sign Up' />

然后改变你的CSS。此解决方案也更向后兼容。

如何获取相同大小的输入字段和提交按钮

2 个答案: