39

既然元素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>

4

4 回答 4

58

好消息是负利润确实有效！

要查看工作中的负边距，请考虑以下代码片段：

.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's 添加到所有div's 和p's 以显示内容框的扩展。

第一段的边距为零，我将一段向左偏移，另一段向右偏移。

如果您有足够的内容来填充段落的宽度（或者如果您显示大纲），您将看到文本框在框外流动content。您还可以从段落中看到outline文本确实向左和向右延伸。

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

如果您开始固定宽度和高度，在 上content，您将看到其他效果，例如在 外面流动的段落content。

研究这个简单的代码结构说明了 CSS 盒子模型的许多方面，花一些时间研究它是很有启发性的。

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

如果从 中删除填充wrapper，您可能不会注意到右边距偏移，因为元素将扩展到填充父容器的整个宽度或页面宽度，具体取决于 HTML/CSS 的具体细节。

为什么我的例子没有显示效果！！！？？？

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

100%如果您对宽度从to进行简单更改auto：

p {
    background: blue;
    width: auto;
}

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

注意：Outline vs Border 另外，请注意红色框是由于outline，它将文本框包含在 中content，即使文本框延伸到父 ( content) 元素之外也是如此。结果，outline框可以比border相应元素的框大得多。

于 2013-04-01T00:15:14.250 回答
7

这是因为默认情况下元素的布局是从左到右而不是从右到左。当你正确时float，你会看到相反的效果。<p>

jsFiddle

.right {
    margin-right: -10px;
    float:right;
}
于 2013-03-31T19:05:28.647 回答
2

简单地说，只需更改此 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;
}
于 2013-04-01T04:26:59.150 回答
0

如果有人想给flex box负边距，

请考虑justify-content: space-between。

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;
}
于 2018-06-30T07:52:58.917 回答