如何从父CSS中排除元素

Question

I have a question to let an HR element ignore the padding from the div it is placed in. It has a padding of: padding:0 20px 0 20px; , but that effects my header and text, which i like. But I want to use the HR tag as a 100% divider.

It looks like this:

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

But how can I make it so that it works like this:

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

So that the HR element is on actual 100% width, so excluding the padding.

Any suggestions?

Answer 1

By using a negative margin, which is as much as the padding.

In this HTML code:

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

Use this CSS:

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

Also see this demo .