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

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

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

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

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

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

105
задан Husterknupp 24 September 2019 в 10:56
поделиться

1 ответ

Вот другой способ сделать это.

<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

0
ответ дан 24 November 2019 в 04:00
поделиться
Другие вопросы по тегам:

Похожие вопросы: