css - 为什么负右边距不起作用？

Question

既然带有 margin-left: -10px 的元素的边缘越过其父元素的边缘，为什么 margin-right: -10px 的元素不会发生同样的情况>?

example

div {
  background: red;
  width: 200px;
  height: 100px;
}

p {
  background: blue;
  width: 100%;
}

.left {
  margin-left: -10px;
}

.right {
  margin-right: -10px;
}

<div>
  <p class="left">Hello</p>
</div>
<div>
  <p class="right">Hello</p>
</div>

Answer 1

好消息是负边距确实有效!

要查看工作中的负边距，请考虑以下代码片段:

.wrapper {
  outline: 1px solid blue;
  padding: 40px;
}

.content {
  outline: 1px solid red;
  background-color: #D8D8D8;
}

.content p {
  outline: 1px dotted blue;
  background-color: rgba(255, 255, 0, 0.3);
  margin: 0 0 0 0;
  text-align: justify;
}

.content p.lefty {
  margin-left: -20px;
}

.content p.righty {
  margin-right: -20px;
}

<div class="wrapper">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, ...</p>
    <p class="lefty">Sed ipsum ante, dictum vel rhoncus id, ...</p>
    <p class="righty">Curabitur aliquam tristique mattis...</p>
  </div>
</div>

我向所有 div 和 p 添加了 outline 以显示内容框的扩展。

第一段的边距为零，我将一个段落向左偏移，另一个向右偏移。

如果您有足够的内容来填充段落的宽度(或者如果您显示轮廓)，您将看到文本框流到 content 框之外。您还可以从段落 outline 中看出，文本确实向左和向右延伸。

但是，要看到右边的效果，需要有足够的内容来填满段落的整个宽度，或者需要在子元素上设置背景色或轮廓。

如果开始固定宽度和高度，在 content 上，您会看到其他效果，例如段落在 content 之外流动。

研究这个简单的代码结构说明了 CSS 盒模型的许多方面，花一些时间研究它很有启发性。

fiddle 引用:http://jsfiddle.net/audetwebdesign/2SKjM/

如果您从 wrapper 中移除 padding，您可能不会注意到右边距偏移，因为元素将扩展以填充父容器的整个宽度或页面宽度，具体取决于具体细节的 HTML/CSS。

为什么我的例子没有显示效果!!!？？？

在您的示例中，您没有看到效果，因为您通过指定 width: 100% 固定了 p 元素的宽度，这指示段落采用的宽度父容器(在您的示例中为 200px)。

如果您将宽度从 100% 简单更改为 auto:

p {
    background: blue;
    width: auto;
}

您会看到您的第二段就在您预期的右边。

注意:轮廓与边框另外，请注意，红色框是由于 outline 引起的，它将文本框包含在 content 中，即使文本框延伸到父项之外(内容) 元素。因此，outline 框可能比相应元素的 border 框大得多。