好消息是负利润率确实有效!
若要查看负边距，请考虑以下代码片段：

.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>

我将outline添加到所有div和p中，以显示内容框的扩展。
第一段没有页边距，我将一段向左偏移，另一段向右偏移。
如果您有足够的内容来填充段落的宽度（或者如果您显示轮廓），您将看到文本框在content框之外流动。您还可以从段落outline中看到文本确实向左和向右扩展。
但是，要查看右侧的效果，需要有足够的内容来填充段落的整个宽度，或者需要在子元素上设置背景色或轮廓。
如果您开始固定宽度和高度，在content上，您将看到其他效果，如段落在content外流动。
研究这个简单的代码结构说明了CSS框模型的许多方面，花一些时间研究它是有启发性的。
Fiddle参考：http://jsfiddle.net/audetwebdesign/2SKjM/
如果从wrapper中删除填充，您可能不会注意到右边距偏移，因为元素将扩展以填充父容器的整个宽度或页面宽度，具体取决于HTML/CSS的特定细节。

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

在您的示例中，您没有看到效果，因为您通过指定width: 100%固定了p元素的宽度，这将指示段落采用父容器的宽度（在您的示例中为200px）。
如果将宽度从100%简单更改为auto：

p {
    background: blue;
    width: auto;
}

你会看到你的第二段就在你所期望的右边。

• • 注意：轮廓与边框**另外，请注意红色框是由outline引起的，outline将文本框包含在content中，即使文本框延伸到父（content）元素之外。因此，outline框可能比相应元素的border框大得多。

这是因为默认情况下元素是从左到右而不是从右到左布局的，当你把float放在右边时，你会看到相反的效果。
jsFiddle

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

简单地说，只是改变这个css：

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

致：

p {
    background: blue;
    display: block;
}

以下是演示：http://jsfiddle.net/pVKNz/
如果你想制作类似移位的元素，使用这个css：

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

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

如果有人想给flex box一个负的margin-right，
请考虑理由-内容：间距。

• • 超文本标记语言**

<div class="parent">
  <div class="child">  
  </div>
  <div class="child negative-margin">
  </div>
</div>

• • 中央支助组**

.parent {
  box-sizing: border-box;
  /* please concentrate on flex, space-between */
  display: flex;
  justify-content: space-between;
  background-color: blue;
  width: 500px;
  height: 200px;
  border: 5px solid red;
}
.child {
  box-sizing: border-box;
  display: inline-block;
  width: 50%;
  background-color: yellow;
}
.negative-margin {
  background-color: cyan;
  margin-right: -250px;
}