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和p以显示内容框的扩展名。

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

如果您有足够的内容来填充段落的宽度（或者如果您显示轮廓），您将看到文本框流在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包含content中的文本框，即使文本框延伸到父（outline）元素之外也是如此。因此，border框可能比相应元素的{{1}}框大得多。

Answer 2

这是因为默认情况下元素从左到右排列不是从右到左。当您float <p>时，您可以看到相反的效果。

jsFiddle

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

Answer 3

简单地说，只需更改此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;
}

Answer 4

如果有人想给flex box负的页边距权利，

请考虑调整内容：间距。

HTML

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

CSS

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

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

4 个答案: