Why margin right isn't working as expected?

I was experimenting with negative margins and came across something that I don't quite understand. If I apply a negative left margin to an element, this causes it to move to the left of its container (div.inner1), but why doesn't the same thing happen with the right margin (div.inner2)? However, I have found that if I also apply a left margin auto to the element that has a negative right margin, it seems to work as expected. (div.inner3) If no fixed width is set on the child elements, the negative margins make them grow outwards and this seems to be the normal behavior (div.inner4 and div.inner5). Can you help me understand why this happens with the negative right margin? Of course, there are many other ways to position these elements offset from their container, but I was curious to better understand the negative margins and how they work. Thank you very much for your help.
<section class="wrapper">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="inner3"></div>
<div class="inner4"></div>
<div class="inner5"></div>
</section>
<section class="wrapper">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="inner3"></div>
<div class="inner4"></div>
<div class="inner5"></div>
</section>
css
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

section {
width: 300px;
height: 200px;
outline: 1px solid red;
margin: 30px auto;
}

.inner1 {
width: 100%;
height: 30px;
background-color: purple;
margin-left: -30px;
}

.inner2 {
width: 100%;
height: 30px;
background-color: blue;
margin-right: -30px;
}

.inner3 {
width: 100%;
height: 30px;
background-color: yellow;
margin-left: auto;
margin-right: -30px;
}

.inner4 {
height: 30px;
background-color: red;
margin-left: auto;
margin-left: -30px;
}


.inner5 {
height: 30px;
background-color: green;
margin-left: auto;
margin-right: -30px;
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

section {
width: 300px;
height: 200px;
outline: 1px solid red;
margin: 30px auto;
}

.inner1 {
width: 100%;
height: 30px;
background-color: purple;
margin-left: -30px;
}

.inner2 {
width: 100%;
height: 30px;
background-color: blue;
margin-right: -30px;
}

.inner3 {
width: 100%;
height: 30px;
background-color: yellow;
margin-left: auto;
margin-right: -30px;
}

.inner4 {
height: 30px;
background-color: red;
margin-left: auto;
margin-left: -30px;
}


.inner5 {
height: 30px;
background-color: green;
margin-left: auto;
margin-right: -30px;
}
2 Replies
Chris Bolson
Chris Bolson2mo ago
You might want to take a look at this article: https://www.quirksmode.org/blog/archives/2020/02/negative_margin.html Towards the top it states:
It is possible to give margins a negative value. This allows you to draw the element closer to its top or left neighbour, or draw its right and bottom neighbour closer to it.
Further on in the article it gives more explanations and examples.
Macfael
Macfael2mo ago
Thank you, @Chris I'll take a loot at it.