如何使输入框和提交按钮大小相同

Question

我是一个新手，对于HTML和CSS不太熟悉。我正在练习个人项目并为其设计高度为55像素，宽度为320像素的输入框和提交按钮。这两个元素包括2像素的边框和15像素的填充。我不确定为什么我的代码没有产生相同的大小。显然，输入框比输入按钮更小（无论宽度还是高度）。如有帮助，感谢提供。

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;
}

<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="[e-mail]" 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>

- jtc10

---

"<span>注册</span>"，或者在按钮中使用任何HTML都是不可取的。请记住，"<button type='submit'>注册</button>" 就像 "<input type='submit' value='注册' />" 一样。 - StackSlave

谢谢你的输入，我不知道这个。就像我说的，我对这个还很新。 - jtc10

Answer 1

发生这种情况的原因是浏览器中呈现box-model的方式。在您的示例中，填充是导致问题的原因。对于按钮，填充和边框包含在303px中，因此按钮总共宽度为303px。对于元素，填充和边框被添加到总宽度中，使其宽度为337px。

要解决此问题，您可以采用几种方法。您可以全局重置box-sizing（CSS中处理此属性的属性），例如：

* { box-sizing: border-box }

或者你只能将它添加到 <input> 元素中。

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

我个人喜欢将其作为重置全局样式以保持一致性。这是我的偏好。

如果你这样做，你需要重新调整元素的高度为68像素，因为现在填充将被视为 height 属性的一部分，而不是添加到其中。

关于盒子模型，这里有一些阅读资料：http://www.w3schools.com/css/css_boxmodel.asp 这里有一些关于 box-sizing 属性的阅读资料：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing 希望这能帮到你！

- disinfor

---

这非常有道理。正是我在寻找的那种解释！非常感谢您抽出时间来回答我的问题！ - jtc10

Answer 2

我会改变：

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

到

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

然后修改您的CSS。这种解决方案更具向后兼容性。

- StackSlave

---

无关紧要，只需添加 * { box-sizing: border-box } - Tusko Trush

我是投了你一票的人。虽然这会改变它们所有的东西，但这是CSS3。 - StackSlave