Using negative % margin not covering parent element

Question

Since when using % in padding the calculation is done based on the width of the parent element, why doesn't a div with the negative % of the parents padding fill make the div cover the whole parent element?

#test {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  font-size: 12px;
  background: #fff;
  color: #000;
  line-height: 18px;
  border: 1px solid #000;
}

#test .content {
  padding: 2% 6%;
  text-align: justify;
}

#test .apply {
  margin-left: -6%;
  margin-right: -6%;
}

#test .apply p {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  background-color: yellow;
}

<div id="test">
  <div class="content">
    <p><strong>Test</strong></p>
    <div class="apply">
      <p>test</p>
    </div>
  </div>
</div>

_“is done based on the width of the parent element”_ - it isn’t; it is calculated based on the width of the _containing block_. Go look up what that means, if you’re unfamiliar. — 04FS, Jan 13 '20 at 12:40
For everyone else - they don’t mean an actual negative padding value here, the question is why `margin-left:-6%;` and `padding: 2% 6%;` don’t lead to the same pixel value regarding the `6%` part. — 04FS, Jan 13 '20 at 12:41
sorry, 04FS is correct. I'm talking about negative margin not padding. — Roland, Jan 13 '20 at 12:44
@Roland I'm glad I took the time to write a detailed answer based on the misuse of _padding_ and not _margin_ in your question — Martin, Jan 13 '20 at 12:46
Does this answer your question? [How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?](https://stackoverflow.com/questions/11495200/how-do-negative-margins-in-css-work-and-why-is-margin-top-5-margin-bottom5) — Madhuri Patel, Jan 13 '20 at 13:05

Temani Afif · Accepted Answer · 2020-01-13T12:57:33.140

The exact value should be -6.81% and not -6%.The inner container will consider the content area of the outer container (without the padding)¹ to calculate the percentage. So we will have

0.06xW = px(1 - 0.06x2)xW  ==> p = 0.068181..

Where W is the content width of #test, (1 - 0.06x2)xW is the content width of .content and p is the percentage you need to use inside the negative margin:

#test {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  font-size: 12px;
  background: #fff;
  color: #000;
  line-height: 18px;
  border: 1px solid #000;
}

#test .content {
  padding: 2% 6%;
  text-align: justify;
}

#test .apply {
  margin-left: -6.81%;
  margin-right: -6.81%;
}

#test .apply p {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  background-color: yellow;
}

<div id="test">
  <div class="content">
    <p><strong>Test</strong></p>
    <div class="apply">
      <p>test</p>
    </div>
  </div>
</div>

¹The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

..

For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box. ^ref

Thanks, Temani! Bonus Question: Is there a easier way to automatically offset the padding of the containing block on certain block elements within the block? — Roland, Jan 14 '20 at 11:40
also can you explain the calculation a bit more? 1- 0.6x2 is the width of .content because 1 stands for 100% and 0.6x2 stands for 6% times 2 because the padding is applied to both sides. because there is padding on both sides, but what is the width of W? I thought it would be 1 - 0.02 because of the border, but that doesn't lead to 0.068181. — Roland, Jan 14 '20 at 11:52
@Roland the border isn't included because it's about the width of the *content area*, the trick is there. So `W` is the content width of #test (whatever the border is) then inside it `.content` is having a padding so it will get the same W minus the padding (1 - 2*0.06). Now to find the margin we consider the last width (the one of `.content` that we make equal to the 6% of the padding (applied to the upper width) — Temani Afif, Jan 14 '20 at 13:46

Using negative % margin not covering parent element

1 Answers1