既然左边距为-10px的元素的边与其父元素的边相交，为什么右边距为-10px的元素的边不相交
范例
div{
背景：红色；
宽度：200px；
高度：100px；
}
p{
背景：蓝色；
宽度：100%；
}
.左{
左边距：-10px；
}
.对{
右边距：-10px；
}<；部门>；
<；p class=“left”>；你好</p>；
</部门>；
<；部门>；
<；p class=“right”>；你好</p>；
</部门>好消息是，负利润确实有效
在工作中看到负边距，考虑下面的代码片段：
.wrapper{
轮廓：1px纯蓝色；
填充：40px；
}
.内容{
轮廓：1px纯红；
背景色：#D8D8D8；
}
.内容p{
轮廓：1px点蓝色；
背景色：rgba（255,255,0,0.3）；
保证金：0；
文本对齐：对齐；
}
.content p.lefty{
左边距：-20px；
}
.内容，对{
右边距：-20px；
}<；div class=“包装器”>；
<；div class=“content”>；
<；p>；Lorem ipsum dolor sit amet，</p>；
<；p class=“lefty”>；在同侧前方，在同侧后方，…</p>；
<；p class=“righty”>；库拉比图·阿利夸姆·特里斯蒂克·马蒂斯……</p>；
</部门>；
</部门>我在所有div和p中添加了outline，以显示内容框的扩展
第一段空白为零，我将一段向左偏移，另一段向右偏移
如果您有足够的内容来填充段落的宽度（或者如果您显示了提纲），您将看到文本框在content框外流动。您还可以从段落大纲中看到文本确实向左和向右延伸
但是，要看到右侧的效果，您需要足够的内容来填充段落的整个宽度，或者需要在子元素上设置背景色或轮廓
如果您开始在内容上固定宽度和高度，您将看到其他效果，例如段落在内容之外流动
研究这个简单的代码结构说明了CSS框模型的许多方面，花点时间研究它很有启发性
小提琴参考：http://jsfiddle.net/audetwebdesign/2SKjM/
如果从包装中删除填充，您可能不会注意到右边距的移动，因为元素将扩展以填充父容器的整个宽度或页面宽度，具体取决于HTML/CSS的具体细节
为什么我的示例没有显示效果
在您的示例中，您没有看到效果，因为您通过指定width:100%来固定p元素的宽度，这将指示段落采用
父容器（示例中为200px）
如果将宽度从100%简单更改为auto：
p{
背景：蓝色；
宽度：自动；
}
你会看到你的第二段就如你所期望的那样在右边
注意：轮廓与边框
另外，请注意，红色框是由于大纲，它将文本框包围在内容中，即使文本框延伸到父（内容）元素之外。因此，大纲框可能比相应元素的边框框大得多