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

Question

我是这个网站的新手，也是 html 和 css 的初学者。我正在做一个个人练习元素，设计要求输入框和提交按钮的高度均为 55 像素，宽度为 320 像素。这两个都包括一个 2px 的边框和一个 15px 的填充。我不确定为什么我当前的代码没有生成相同的尺寸。输入按钮明显小于输入框(宽度和高度)。

如有任何帮助，我们将不胜感激。

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="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>

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 的一些阅读 Material 属性:https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

希望这对您有所帮助!