Использование отрицательной маржи в%, не покрывающей родительский элемент - PullRequest
Новая
       36

Использование отрицательной маржи в%, не покрывающей родительский элемент

0 голосов
/ 13 января 2020

Поскольку при использовании% в заполнении вычисление выполняется на основе ширины родительского элемента, почему 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>

1 Ответ

2 голосов
/ 13 января 2020

Точное значение должно быть -6.81%, а не -6%. Внутренний контейнер будет учитывать область содержимого внешнего контейнера (без отступов) 1 для расчета процента. Таким образом, у нас будет 

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

Где W - ширина содержимого #test, (1 - 0.06x2)xW - ширина содержимого .content, а 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>

1 Положение и размер блока (ов) элемента иногда вычисляются относительно определенного прямоугольника, называемого содержащий блок элемента. Содержащий блок элемента определяется следующим образом:

..

Для других элементов, если позиция элемента 'относительная' или 'stati c', содержащий блок формируется из края содержимого блока предка контейнера ближайшего блока. ref
...