Why negative right margin not work? - css

Question

Since the edge of an element with margin-left: -10px crosses the edge of its parent, why doesn’t the same happen with margin-right: -10px?
example
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

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.
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 content box. You can also see from the paragraph outline's that the text does extend to the left and to the right.
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.
Studying this simple code structure illustrates many facets of the CSS box model and it is illuminating to spend some time with it.
Fiddle Reference: 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.
Why Did My Example Not Show the Effect!!!???
In your example, you did not see the effect because you fixed the width of the p elements by specifying width: 100%, which directs the paragraph to take the width of the
parent container (200px in your example).
If you make a simple change to the width from 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 Border
Also, 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 outline box can be much bigger than the border box of the corresponding element.

Answer 2

It's because elements are laid out from left-to-right by default not right-to-left. You can see the opposite effect when you float the <p>s right.
jsFiddle
.right {
margin-right: -10px;
float:right;
}

Answer 3

Simply, just change this css :
p {
background: blue;
width: 100%;
}
to:
p {
background: blue;
display: block;
}
Here the demo : http://jsfiddle.net/pVKNz/
If you want to made like shifting elements, use this css:
.left {
margin-left: -10px;
margin-right:10px;
}
.right {
margin-right: -10px;
margin-left:10px;
}

Answer 4

If there is someone wants to give negative margin-right to flex box,
Please consider 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;
}