由于边距为零的元素的边缘与其父元素的边缘相交越差,为什么margin-right不相同：-10px？
解决方法
好消息是负利润率做得很好！
要在工作中看到负边距,请考虑以下代码段：
<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>
和以下CSS：
.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.3);
margin: 0 0 0 0;
text-align: justify;
}
.content p.lefty {
margin-left: -20px;
}
.content p.righty {
margin-right: -20px;
}
第一段的利润率为零,我把左边的一个段落,右边的另一段.
如果您有足够的内容填写该段落(或如果显示轮廓),您将在内容框之外看到文本框流.您还可以从段落大纲中看到,文本确实延伸到左边和右边.
但是,要看到右侧的效果,您需要足够的内容来填充段落的全部宽度,或者您需要在子元素上设置背景颜色或轮廓.
如果您开始修改宽度和高度,内容上会看到其他效果,如段落流出内容.
研究这个简单的代码结构说明了CSS框模型的许多方面,并且它花了一些时间照亮它.
小提琴参考：http://jsfiddle.net/audetwebdesign/2SKjM/
如果从包装器中删除填充,您可能不会注意到正确的边距偏移,因为元素将扩展以填充父容器的全宽或页宽,具体取决于HTML / CSS的具体细节.
在您的示例中,您没有看到效果,因为您通过指定width：100％来修复p元素的宽度,该宽度指示段落的宽度
父容器(在您的示例中为200px).
如果您将宽度从100％简单更改为自动：
p {
background: blue;
width: auto;
}
你会看到你的第二段正如你所料.
注意：大纲与边框此外,请注意,红色框是由于大纲,其中包含内容中的文本框,即使文本框延伸到父(内容)元素之外.因此,轮廓框可以比相应元素的边框大得多.
