HTML5 部分和输入标签中的 CSS 宽度

Question

我有以下 HTML5 和 CSS 代码:

section {
  width: 200px;
  background-color: blue;
}

input {
  display:block;
  margin-bottom: 10px;
  width: 200px;
}

input[type=submit] {
  width:100px;
  margin: 0 auto 0 auto;
}

<section>
  <form>
    <input type="text" placeholder="Regular text here!" />
    <input type="number" placeholder="This is a number" />
    <input type="tel" placeholder="Your phone here."/>
    <input type="email" placeholder="Your email here." />
  
    <input type="submit" />
  
  </form>
</section>

虽然部分和输入标签的宽度相同 (200px)，但部分背景中的蓝色并未完全包含输入。为什么会这样？

Answer 1

发生这种情况是因为最初有一个 border，它被添加到 input 元素周围。您可以使用 box-sizing: border-box 强制 border 在指定的 width 内。

section {
  width: 200px;
  background-color: blue;
}
input {
  display:block;
  margin-bottom: 10px;
  width: 200px;
  box-sizing: border-box;
}
input[type=submit] {
  width:100px;
  margin: 0 auto 0 auto;
}

<section>
  <form>
    <input type="text" placeholder="Regular text here!" />
    <input type="number" placeholder="This is a number" />
    <input type="tel" placeholder="Your phone here."/>
    <input type="email" placeholder="Your email here." />
    <input type="submit" />
  </form>
</section>