使用负的％余量不覆盖父元素

Question

由于在填充中使用％时，计算是基于父元素的宽度进行的，为什么带有负％父填充填充的div不能使div覆盖整个父元素？

#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>

Answer 1

确切值应为-6.81%，而不是-6%。内部容器将考虑外部容器的内容区域（不带填充）来计算百分比。所以我们将有

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

W是#test的宽度，p是您需要在负边距内使用的百分比：

#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>