css中的负右边距

Question

在chrome dev工具栏中，我在responsive.css:1101处看到了这些详细信息

但是当我转到responsive.css的第1101行时，我找不到-20px的右边距：

那么是什么导致-20px右边距？

我搜索了整个的responsive.css但我找不到导致-20px右边距的规则。

在样式标签下

在同一时间的计算选项卡下

Answer 1

浏览器自动计算该值。来自MDN：

  

auto被某些合适的值替换，例如它可以用于块的居中。

div { width:50%;  margin:0 auto; }

     

将div容器水平居中。

Answer 2

您所看到的-20px位于＆＃34; Computed＆＃34;开发人员工具的标签。此选项卡显示根据适用于给定元素的所有样式规则计算的实际金额。

所以，如果你有一个类似width:50%之类的样式规则，那么在某些时候，浏览器需要弄清楚究竟有多大。这就是＆＃34; Computed＆＃34;样式选项卡显示给您。您不一定会在源.css文件中看到这些值。

相反，看看＆＃34;样式＆＃34;开发人员工具的选项卡，找到有问题的项目。在该标签中，您将能够看到适用于该元素的样式规则，如果有多个样式规则，您将全部看到它们，但有些可能会有一条线贯穿它们，这表明他们被其他地方更具体的规则所覆盖。

现在，在您的情况下，您将内容设置为960px;以及auto的边距。开发人员的工具只是告诉你边距是因为第1101行指定的值。但是因为你已经使用了auto，所以可能有许多其他样式有助于当您测试因子时，最终结果和视口的大小。