Ignore parent padding

Question

I\'m trying to get my horizontal rule to ignore the parent padding.

Here\'s a simple example of what I have:

#par         


        

Answer 1

Kinda late.But it just takes a bit of math.

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

I don't have Windows so I didn't test this in IE.

fiddle: fiddle example..

Answer 2

margin: 0 -10px; 

is better than

margin: -10px;

The later sucks content vertically into it.

Answer 3

Easy fix, just do

margin:-10px

on the hr.

Answer 4

For image purpose you can do something like this

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

Answer 5

easy fix.. add to parent div:

box-sizing: border-box;

Answer 6

If you have a parent container with vertical padding and you want something (e.g. an image) inside that container to ignore its vertical padding you can set a negative, but equal, margin for both 'top' and 'bottom':

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

The actual value doesn't appear to matter much. Haven't tried this for horizontal paddings.