Как исключить элемент из родительского 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; 
} 

Также см этот demo.