Search code examples
cssmarginpadding

Using negative % margin not covering parent element

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>

Solution

  • 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)1 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>

    1The 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:

    ..

    1. 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