Übergeordnete Polsterung ignorieren

Question

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

Hier ist ein einfaches Beispiel dafür:

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

Sie werden feststellen, dass die horizontale Regel aus der übergeordneten um 10px erstreckt. Ich versuche, es zu bekommen, um die Polsterung zu ignorieren, dass alles andere in der übergeordneten div braucht.

Ich bin mir bewusst, dass ich ein separates Div für alles andere machen könnte; dies ist nicht die Lösung, die ich suche.

Answer 1

Einfache Lösung, einfach tun

margin:-10px

in der Stunde.

Answer 2

Für Bildzwecke können Sie wie folgt vorgehen

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

Answer 3

Im Großen und Ganzen wurde diese Frage von allen beantwortet, aber in kleinen Teilen. Ich habe mich gerade eben damit beschäftigt.

Ich wollte eine Schaltfläche Fach an der Unterseite eines Panels, wo das Panel hat 30px rundum haben. Die Knopfleiste 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 aquí mit mehr Fleisch, um die Idee voranzutreiben. Allerdings sind die wichtigsten Elemente oben jede übergeordnete Polsterung mit passenden negativen Rändern auf dem Kind ausgeglichen. Dann am kritischsten, wenn Sie das Kind in voller Breite ausführen möchten, dann Breite auf Auto setzen. (wie in einem Kommentar oben erwähnt von schlingel ).

Answer 4

Eine andere Lösung:

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

Ändern Sie einfach die Werte für oben/rechts/unten/links entsprechend Ihrem Fall.

Answer 5

Ein bisschen spät. Aber man muss nur ein bisschen rechnen.

.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 dies nicht im IE getestet.

fiedeln: Beispiel fiddeln