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

128

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

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

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

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

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

html css

— Сэм
источник

160

Легко исправить, просто сделай

margin:-10px

по час.

— Сэм
источник

9

Это работает, но проблема в том, что он не расширяет всю длину родительского div. Это связано с тем, что отступ НЕ включен в ширину 100 пикселей, это означает, что на самом деле он шириной 120 пикселей, и ваш <hr>будет 20 пикселей от конца вашего div. См. Этот jsFiddle, чтобы понять, что я имею в виду: jsfiddle.net/YVrWy/1

— Аластер Питтс,

Да, я решил это, когда добавил это; ширина значения не имеет.

— Сэм

22

если вам нужна 100% ширина, просто используйте auto как атрибут ширины. Ширина будет рассчитана с учетом заданных полей.

— schlingel

4

Вы должны сделать что-то вроде ... margin: 0 -15px; ..... в противном случае hr будет вертикально засасывать соседний контент к себе.

— honkskillet

вроде как хакерский. хотел бы был лучший способ

— oldboy

30

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

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

— adriancho5692
источник

8

Но что, если вам не обязательно знать отступы родителя?

1

Это сработало для меня, когда я использовал минимальную ширину, а не просто ширину.

— Педро Надольный

@ user5707327, вы всегда можете комбинировать стили с javascript для получения родительского отступа

— adriancho5692,

вау, гениальное использование отрицательной ширины!

— Mr PizzaGuy,

9

По большому счету, на этот вопрос все получили ответы, но по частям. Я занимался этим буквально минуту назад.

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

.panel
{
  padding: 30px;
}

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

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

— Митчелл Гир
источник

7

Немного поздно, но для этого нужно немного математики.

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

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

— sqram
источник

1

Вы должны разделить padding-right: 60px на padding-left: 30px; padding-right: 30px, чтобы содержимое не смещалось при использовании text-align: center;

— Люк

3

margin: 0 -10px;

лучше, чем

margin: -10px;

Последний втягивает в себя контент вертикально.

— honkskillet
источник

2

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

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

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

— easwee
источник

1

С определенной шириной легко. Проблема в том, что ты не знаешь ширины

— Гильерме Феррейра

@GuilhermeFerreira Используйте width: auto;в hr. jsfiddle.net/ToolmakerSteve/7p85dsrq/3 К сожалению, это решение по-прежнему требует знания, paddingустановленного родителем.

— ToolmakerSteve

1

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

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

— Мартин Альгестен
источник

1

Если у вас есть родительский контейнер с вертикальным заполнением, и вы хотите, чтобы внутри этого контейнера что-то (например, изображение) игнорировало его вертикальное заполнение, вы можете установить отрицательное, но равное поле для «верха» и «низа»:

margin-top: -100px;
margin-bottom: -100px;

Фактическое значение не имеет большого значения. Не пробовал для горизонтальных прокладок.

— Marnix.hoh
источник

0

Вот еще один способ сделать это.

<style>
    .padded-element{margin: 0px; padding: 10px;}
    .padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
    <img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>

Вот несколько примеров на repl.it: https://repl.it/@bryku/LightgrayBleakIntercept

— Диллон Бернетт
источник

-1

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

размер коробки: рамка-рамка;

— Жаклин У
источник