html - 仅将元素移动到具有负边距的左侧，但元素也会移动到顶部

Question

类为“negative”的段落应该只向左移动。但是当我放置负边距时，元素也会移动到顶部。为什么会这样，我该如何解决？

没有负边距的代码:

.negative {  }

div{
  background-color:red;
}

.negative{
 background-color:blue;
}

<div><p class="negative">...</p><p>...</p></div>

带有负边距的代码:

.negative { margin: 0 -30px; }

div{
  background-color:red;
}

.negative{
 background-color:blue;
}

<div><p class="negative">...</p><p>...</p></div>

Answer 1

您需要添加 margin-left 属性。 display: block 不是必需的——它是 p 元素的默认 css 属性，但如果你要切换到 span 或其他东西，你需要确认该元素是一个 block 或类似的东西，会受到 margin-left 的影响。

.negative { margin-left: -5px; }

div{
  background-color:red;
}

.negative{
 background-color:blue;
}

p {
  display: block;
}

<div>
<p class="negative">...</p>
<p>...</p>
</div>