Ignore parent padding

Problem

I’m attempting to have my horizontal rule disregard parent padding.

Here’s an example of what I’ve got:

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

You’ll notice that the horizontal rule extends 10px beyond the parent. I’m trying to get it to ignore the padding that the parent div requires for everything else.

I realize I could create a separate div for everything else, but it isn’t the solution I’m looking for.

Asked by Sam

Solution #1

It’s a simple repair, simply do it.

margin:-10px

on the hr.

Answered by Sam

Solution #2

You may do something like this for the sake of image.

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

Answered by adriancho5692

Solution #3

This question has been answered in major part by everyone, but in tiny sections by everyone. I recently finished dealing with this.

I wanted a button tray at the bottom of a panel with a 30px border all the way around. The bottom and sides of the button tray required to be flush.

.panel
{
  padding: 30px;
}

.panel > .actions
{
  margin: -30px;
  margin-top: 30px;
  padding: 30px;
  width: auto;
}

Here’s a demo with a little more meat on the bones to help you understand what I’m talking about. The essential parts above, on the other hand, are offset by negative margins on the child, which match the parent padding. Then most critical if you want to run the child full-width then set width to auto. (as mentioned in a comment above by schlingel).

Answered by Mitchell Geere

Solution #4

It’s a little late. But all it takes is a little 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>

Because I don’t have Windows, I didn’t try this in Internet Explorer.

fiddle: fiddle example..

Answered by sqram

Solution #5

You can specify a negative, but equal, margin for both ‘top’ and ‘bottom’ 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:

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

The actual value appears to be unimportant. For horizontal paddings, I haven’t tried this yet.

Answered by Marnix.hoh

Post is based on https://stackoverflow.com/questions/4296530/ignore-parent-padding