CSS 为什么负右边距不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15733294/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why negative right margin not work?
提问by anton_byrna
Since the edge of an element with margin-left: -10pxcrosses the edge of its parent, why doesn't the same happen with margin-right: -10px?
由于元素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>回答by Marc Audet
The good news is that negative margins do work!
好消息是负利润率确实有效！
To see negative margins at work, consider the following code snippet:
要查看工作中的负边距，请考虑以下代码片段：
.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>I added outline's to all the div's and p's to show the extend of the content boxes.
我将outline's添加到所有的div's 和p's 以显示内容框的扩展。
The first paragraph has zero margins and I offset one paragraph to the left and the other to the right.
第一段的边距为零，我将一段向左偏移，另一段向右偏移。
If you have enough content to fill the width of the paragraph (or if you show the outlines), you will see the text box flow outside of the contentbox. You can also see from the paragraph outline's that the text does extend to the left and to the right.
如果您有足够的内容来填充段落的宽度（或者如果您显示轮廓），您将看到文本框流到框外content。您还可以从段落中看到outline文本确实向左和向右延伸。
However, to see the effect on the right, you need enough content to fill in the full width of the paragraph or you need to set a background color or outline on the child element.
但是，要查看右侧的效果，您需要足够的内容来填充段落的整个宽度，或者您需要在子元素上设置背景颜色或轮廓。
If you start fixing the width and height, on content, you will see other effects such as the paragraphs flowing outside of content.
如果您开始在 上固定宽度和高度，content您将看到其他效果，例如在 之外流动的段落content。
Studying this simple code structure illustrates many facets of the CSS box model and it is illuminating to spend some time with it.
研究这个简单的代码结构说明了 CSS 盒模型的许多方面，花一些时间研究它是很有启发性的。
Fiddle Reference: http://jsfiddle.net/audetwebdesign/2SKjM/
小提琴参考：http: //jsfiddle.net/audetwebdesign/2SKjM/
If you remove the padding from the wrapper, you may not notice the right margin shift because the elements will extend to fill the full width of the parent container or the page width depending on the specific details of the HTML/CSS.
如果您从 中删除填充wrapper，您可能不会注意到右边距移动，因为元素将扩展以填充父容器的整个宽度或页面宽度，具体取决于 HTML/CSS 的具体细节。
Why Did My Example Not Show the Effect!!!???
为什么我的例子没有显示效果！！！？？？
In your example, you did not see the effect because you fixed the width of the pelements by specifying width: 100%, which directs the paragraph to take the width of the
parent container (200px in your example).
在您的示例中，您没有看到效果，因为您p通过指定来固定元素的宽度width: 100%，这会指示段落采用父容器的宽度（在您的示例中为 200px）。
If you make a simple change to the width from 100%to auto:
如果您对从100%to的宽度进行简单的更改auto：
p {
background: blue;
width: auto;
}
you will see your second paragraph just out to the right as you expected.
您会像预期的那样在右侧看到第二段。
Note: Outline vs BorderAlso, note that the red box is due to the outline, which encloses the text boxes within the content, even when the text boxes extend outside of the parent (content) element. As a result, the outlinebox can be much bigger than the borderbox of the corresponding element.
注意：轮廓与边框另外，请注意红色框是由于outline将文本框包围在 内content，即使文本框延伸到父 ( content) 元素之外。因此，outline框可以比border相应元素的框大得多。
回答by Daniel Imms
回答by Fredy
Simply, just change this css :
简单地说，只需更改此 css ：
p {
background: blue;
width: 100%;
}
to:
到：
p {
background: blue;
display: block;
}
Here the demo : http://jsfiddle.net/pVKNz/
这里的演示：http: //jsfiddle.net/pVKNz/
If you want to made like shifting elements, use this css:
如果你想制作像移动元素一样，使用这个css：
.left {
margin-left: -10px;
margin-right:10px;
}
.right {
margin-right: -10px;
margin-left:10px;
}
回答by Jay Lim
If there is someone wants to give negative margin-right to flex box,
如果有人想给 flex box 负边距，
Please consider justify-content: space-between.
请考虑justify-content: space-between。
HTML
HTML
<div class="parent">
<div class="child">
</div>
<div class="child negative-margin">
</div>
</div>
CSS
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;
}
