Игнорировать родительский отступ

Я пытаюсь заставить мое горизонтальное правило игнорировать родительский отступ.

Вот простой пример того, что у меня есть:

#parent {
  padding:10px;
  width:100px;
}
hr {
  width:100px;
}

Вы обнаружите, что горизонтальное правило выходит за пределы родительского элемента на 10 пикселей. Я пытаюсь заставить его игнорировать заполнение, в котором нуждается все остальное в родительском div.

Я знаю, что я мог бы сделать отдельный div для всего остального; это не решение, которое я ищу.

Ответ 1

Простое исправление, просто сделайте

margin:-10px

на hr.

Ответ 2

Для цели изображения вы можете сделать что-то вроде этого

img {
    width: calc(100% + 20px); // twice the value of the parent padding
    margin-left: -10px; // -1 * parent padding
}

Ответ 3

В целом на этот вопрос был дан ответ, но в мельчайших деталях. Я имел дело с этим всего минуту назад.

Я хотел иметь лоток для кнопок внизу панели, где панель имеет 30 пикселей вокруг. Лоток для кнопок должен быть заподлицо внизу и бокам.

.panel
{
  padding: 30px;
}

.panel > .actions
{
  margin: -30px;
  margin-top: 30px;
  padding: 30px;
  width: auto;
}

Я сделал демонстрацию здесь с большей плотностью, чтобы управлять идеей. Однако ключевые элементы, указанные выше, компенсируют любое родительское дополнение с соответствующими отрицательными полями для дочернего элемента. Тогда наиболее важно, если вы хотите запустить дочернюю полную ширину, а затем установите ширину в авто. (как упоминалось в комментарии выше schlingel).

Ответ 4

Покойный поздний. Но это просто требует немного математики.

.content {
  margin-top: 50px;
  background: #777;
  padding: 30px;
  padding-bottom: 0;
  font-size: 11px;
  border: 1px dotted #222;
}

.bottom-content {
  background: #999;
  width: 100%; /* you need this for it to work */
  margin-left: -30px; /* will touch very left side */
  padding-right: 60px; /* will touch very right side */
}

<div class='content'>

  <p>A paragraph</p>
  <p>Another paragraph.</p>
  <p>No more content</p>


  <div class='bottom-content'>
      I want this div to ignore padding.
  </div>

У меня нет Windows, поэтому я не тестировал это в IE.

скрипка: пример скрипта..

Ответ 5

Ваш родитель имеет ширину 120 пикселей - это 100 ширины + 20 дополнений с каждой стороны, поэтому вам нужно сделать линию шириной 120 пикселей. Вот код. В следующий раз обратите внимание, что заполнение добавляет ширину элемента.

#parent
{
    width: 100px;
    padding: 10px;
    background-color: Red;
}

hr
{
    width: 120px;
    margin:0 -10px;
    position:relative;
}

Ответ 6

Проблема может заключаться в том, какую модель коробки вы используете. Вы используете IE?

Когда IE находится в режиме quirks, width - это внешняя ширина вашего поля, что означает, что прокладка будет внутри. Таким образом, общая площадь, оставшаяся внутри коробки, составляет 100px - 2 * 10px = 80px, и в этом случае ваш 100px wide <hr> не будет выглядеть правильно.

Если вы находитесь в стандартном режиме, width - это внутренняя ширина вашего окна, а добавление добавляется снаружи. Таким образом, общая ширина окна 100px + 2 * 10px = 120px оставляет ровно 100 пикселей внутри коробки для вашего <hr>.

Чтобы решить эту проблему, настройте значения CSS для IE. (Зайдите в Firefox, чтобы узнать, хорошо ли там там). Или даже лучше, установите тип документа, чтобы вывести браузер в строгий режим - где IE также следует стандартной модели окна.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
 ...

http://www.quirksmode.org/css/quirksmode.html

Ответ 7

margin: 0 -10px;

лучше, чем

margin: -10px;

Позднее всасывает содержимое вертикально в него.

Ответ 8

легко исправить.. добавить в родительский div:

размер коробки: бордюр;