Question

我不明白为什么这两个div的宽度不同。我的目标是在页面的每一侧都有边距。此外，我不明白为什么左侧比右侧更多的空间应该是平等的。

body {
  margin-left: 9%;
  margin-right: 9%;

}

.nav {
  float: left;
  width: 100%;
  height: 10px;
  padding-top: 3px;
  padding-bottom: 10px;
  background-color: green;
}

.logo {
  clear: both;
  width: 100%;
  height: 100px;
  background-color: #C7D0D5;
  padding: 20px;
}

Answer 1

你的div上缺少box-sizing: border-box;，填充增加了整体宽度

Answer 2

添加填充时，会将其添加到大小中，因此.logo的宽度为100％+ 40px。要解决此问题，请将框大小调整为边框。

.logo {
  clear: both;
  width: 100%;
  height: 100px;
  background-color: #C7D0D5;
  padding: 20px;
  box-sizing: border-box;
}

Answer 3

查看box-sizing属性，以更直观的方式更改边距的行为：http://www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 4

这是因为你将.logo的填充设置为20px。因此，你的.logo左侧和右侧的宽度将增加20px。

尝试删除它或添加＆＃34; box-sizing：border-box;＆＃34;所以即使你给出填充，你的.logo宽度也不会扩展。

div的宽度问题

4 个答案: