Macfael Posts - Answer Overflow

Macfael

•Created by Macfael on 4/1/2024 in #front-end

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;
}

3 replies

Gaming

Programming