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>

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

1 个答案: