Kevin Powell - Community•9mo ago

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•9mo 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.

MacfaelOP•9mo ago

Thank you, @Chris I'll take a loot at it.

Gaming

Programming

Why margin right isn't working as expected?