Как исключить элемент из родительского CSS

Question

У меня есть вопрос, чтобы позволить элементу HR игнорировать заполнение от div, в котором он находится. Он имеет заполнение: padding:0 20px 0 20px;, но это влияет на мой заголовок и текст, который мне нравится. Но я хочу использовать метку HR в качестве 100% -ного делителя.

Это выглядит так:

*------------*
| Header tag |
| ---------- |
| some text  |
| some text  |
*------------*

Но как я могу сделать так, чтобы это работало так:

*------------*
| Header tag |
+------------+
| some text  |
| some text  |
*------------*

Так что элемент HR имеет фактическую ширину 100%, исключая заполнение.

Какие-либо предложения?

Answer 1

Используя отрицательное поле, равное отступу.

В этом HTML-коде:

<div>
    Text
    <hr />
    Text
</div>

Используйте этот CSS:

div {
    width: 200px;
    padding: 10px;
    border: 1px solid black;
}
hr {
    margin-left: -10px;
    margin-right: -10px;
}

Также посмотрите это демо.