CSS 宽度不正确/对我来说没有意义答案

【问题标题】：CSS width isn't correct/doesn't make sense to meCSS 宽度不正确/对我来说没有意义
【发布时间】：2017-02-20 04:54:34
【问题描述】：

我得到了一个宽度为 60% 的内容部分。在此之上，我得到了一个宽度为 40% 的文本输入。在该输入字段旁边，有一个提交按钮。所以根据我的数学知识，输入字段和内容部分应该具有相同的宽度。 |_________40%_________||____20%____|
|_______________60%________________|
但事实并非如此。
HTML：

<input id="plannername" placeholder="Name eingeben" type="text"></input><!--

--><input id="plannersubmit" type="submit" value="eintragen"></input>

<div id="content"></div>

CSS：

#plannername{ /* The text input */
  width:40%;
  background-color:#9eefbc;
  margin-left:20%;
  border:0;
  font-size:2em;
  padding:20px;
}
#plannersubmit{ /* The submit button */
  width:20%;
  background-color:#6dce91;
  border:0;
  font-size:2em;
  padding:20px;
  transition:.2s ease-in-out;
}
#content{
  width:60%;
  background-color:#9eefbc;
  height:500px;
  margin-left:20%;
  padding-top:70px;
  margin-top:3px;
}

我的完整代码在这里：http://codepen.io/tobiasglaus/pen/xgBeaJ

【问题讨论】：

标签： html css height width

【解决方案1】：

您在输入框上设置了padding，要使其成为总宽度的一部分，您可以设置box-sizing: border-box; 或者只是通用：

* {
  box-sizing: border-box;
}

包含伪元素的常见做法是：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

请注意，即使您没有手动设置，浏览器也会为大多数输入元素设置一些默认填充和边框。上述解决方案仍然适用。

【讨论】：

【解决方案2】：

您需要使用box-sizing: border-box 来容纳填充。尝试添加以下内容：

* {
  box-sizing: border-box;
}

或者您可以根据需要将其添加到个人div。

【讨论】：