Ignorieren Sie die übergeordnete Polsterung

Ich versuche, meine horizontale Regel dazu zu bringen, die übergeordnete Polsterung zu ignorieren.

Hier ist ein einfaches Beispiel von dem, was ich habe:

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

Sie werden feststellen, dass sich die horizontale Linie um 10 Pixel aus dem übergeordneten Element heraus erstreckt. Ich versuche, es dazu zu bringen, die Polsterung zu ignorieren, die alles andere im übergeordneten Div benötigt.

Mir ist bewusst, dass ich für alles andere ein separates div erstellen könnte; das ist nicht die Lösung die ich suche.

Einfache Lösung, tun Sie es einfach

margin:-10px

auf die Std.

Für Bildzwecke können Sie so etwas tun

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

Im Großen und Ganzen wurde diese Frage beantwortet, aber in kleinen Teilen von allen. Ich habe mich vor einer Minute damit befasst.

Ich wollte eine Schaltflächenablage am unteren Rand eines Panels haben, wo das Panel rundum 30 Pixel hat. Die Knopfablage musste unten und an den Seiten bündig sein.

.panel
{
  padding: 30px;
}

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

Ich habe eine Demo gemacht hier mit mehr Fleisch, um die Idee voranzutreiben. Die oben genannten Schlüsselelemente werden jedoch von allen übergeordneten Auffüllungen mit passenden negativen Rändern auf dem untergeordneten Element versetzt. Dann am kritischsten, wenn Sie das Kind in voller Breite ausführen möchten, dann setzen Sie width auf auto. (wie oben in einem Kommentar von schlingel erwähnt).

Eine andere Lösung:

position: absolute;
top: 0;
left: 0;

ändern Sie einfach oben/rechts/unten/links zu Ihrem Fall.

Irgendwie spät. Aber es braucht nur ein bisschen Mathe.

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

Ich habe kein Windows, also habe ich das nicht im IE getestet.

Geige:
Geige Beispiel..

Wenn Sie einen übergeordneten Container mit vertikaler Auffüllung haben und Sie möchten, dass etwas (z. B. ein Bild) in diesem Container seine vertikale Auffüllung ignoriert, können Sie einen negativen, aber gleichen Rand für „oben“ und „unten“ festlegen:

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

Der tatsächliche Wert scheint keine große Rolle zu spielen. Ich habe dies nicht für horizontale Polsterungen versucht.

margin: 0 -10px; 

ist besser als

margin: -10px;

Letzteres saugt Inhalte vertikal hinein.