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

Question

由于元素margin-left: -10px的边缘与其父元素的边缘相交,为什么不会发生同样的情况margin-right: -10px呢？

例

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>

我添加outline了所有div的和ps以显示内容框的扩展.

第一段的边距为零,我将一个段落向左侧,另一个段落向右侧.

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

但是,要查看右侧的效果,您需要足够的内容来填充段落的整个宽度,或者您需要在子元素上设置背景颜色或轮廓.

如果您开始修复宽度和高度,content您将看到其他效果,例如流出的段落content.

研究这个简单的代码结构说明了CSS盒子模型的许多方面,并且花费一些时间使用它是很有启发性的.

小提琴参考:http://jsfiddle.net/audetwebdesign/2SKjM/

如果从中删除填充,则wrapper可能不会注意到右边距偏移,因为元素将扩展以填充父容器的整个宽度或页面宽度,具体取决于HTML/CSS的特定详细信息.

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

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

如果您对宽度进行简单的更改,请执行以下100%操作auto:

p {
    background: blue;
    width: auto;
}

你会看到你的第二段正如你所期望的那样.

注意:大纲与边框 此外,请注意,红色框是由于outline包含文本框内的文本框content,即使文本框扩展到parent(content)元素之外.结果,outline盒子可以比border相应元件的盒子大得多.

Answer 2

这是因为元素默认从左到右排列,而不是从右到左.你可以看到,当你相反的效果float的<p>没错.

的jsfiddle

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