使用负margin仅左移元素却上移：原因及解决方法

这个问题其实是CSS margin缩写规则和浏览器默认样式共同导致的，我来帮你拆解清楚：

为什么元素会向上移动？ #

浏览器默认给 <p> 标签设置了上下外边距（比如Chrome、Firefox这类主流浏览器里，默认值是 margin-top: 1em; margin-bottom: 1em;）。你写的 margin: 0 -30px; 是CSS的缩写语法，它等价于：

.negative {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: -30px;
  margin-right: -30px;
}

这就把原本<p>元素自带的上下外边距直接覆盖成0了，对比旁边未设置样式的<p>，这个带.negative类的段落自然就显得“向上移动”了。

如何修复？ #

根据你的需求——仅向左移动，我们只需要单独设置左外边距，不要用缩写覆盖上下方向的margin：

.negative {
  margin-left: -30px;
  /* 如果你想明确保留默认上下边距，也可以手动写上：
  margin-top: 1em;
  margin-bottom: 1em;
  */
}

如果你的实际需求是让段落左右都超出容器，但不想改变上下位置，那就要明确指定上下margin为你需要的值（比如保留默认的1em）：

.negative {
  margin: 1em -30px;
  /* 或者更清晰的拆分写法：
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: -30px;
  margin-right: -30px;
  */
}

这样就能精准控制元素的位置，不会出现意外的向上偏移了。

内容的提问来源于stack exchange，提问作者user9225569