css为什么左外边距设了没用

在CSS中，外边距（margin）是一种常用的布局属性，它可以用来在元素的外部创建空白间隔。

在文档流中，元素默认是从左到右排列的。因此，如果我们想要让一个元素左移，我们可以试着给它设置一个负的左外边距（margin-left）。

然而，有时候我们会出现这样的问题：明明已经将元素的左外边距设为了负值，但是界面上并没有任何变化。这是为什么呢？

 
div {
  margin-left: -20px;
}

首先，我们需要明确一点：CSS盒模型是由内向外计算的。也就是说，在计算元素的位置、宽度和高度时，浏览器会先考虑元素的内边距、边框和内容，再加上元素的外边距。

如果我们试着将左外边距设置为负值，浏览器就会尝试将元素向左移动一定的距离。但如果这个距离超过了元素的左侧边缘，那么元素就会隐藏在左边的边界之外，导致左外边距没有任何效果。

此外，还有一种情况可能会导致左外边距无效：当元素处于某些特殊的布局环境中时，左外边距会失去作用。例如，当元素的父元素拥有浮动或绝对定位时，左外边距就会被忽略。

总之，在CSS中，理解盒模型的计算顺序和布局规则，可以帮助我们更好地调整元素的位置和外观，避免出现一些意想不到的问题。