Ignorieren Sie die übergeordnete Polsterung

Lesezeit: 4 Minuten

Benutzer-Avatar
Sam

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.

  • Das funktioniert, aber das Problem ist, dass es nicht die volle Länge des übergeordneten div erweitert. Dies liegt daran, dass die Polsterung NICHT in der Breite von 100 Pixel enthalten ist, dies bedeutet, dass sie tatsächlich 120 Pixel breit ist und Ihre <hr> wird 20px vom Ende Ihres div sein. Siehe diese jsFiddle für das, was ich meine: jsfiddle.net/YVrWy/1

    – Alastair Pitts

    28. November 2010 um 11:42 Uhr


  • Wenn Sie 100% Breite benötigen, verwenden Sie einfach auto als Breitenattribut. Die Breite wird in Bezug auf die angegebenen Ränder berechnet.

    – Schlegel

    31. Oktober 2013 um 12:08 Uhr

  • Sie sollten so etwas tun wie… margin: 0 -15px; …..ansonsten saugt der hr benachbarte Inhalte vertikal an.

    – Honkskillet

    4. März 2015 um 1:21 Uhr

  • irgendwie hackig. wünschte, es gäbe einen besseren Weg

    – alter Junge

    19. Juli 2019 um 1:39 Uhr

  • @AlastairPitts das ist die Lösung für deine Geige jsfiddle.net/jb2xtygz

    – Michael Pacheco

    11. Januar 2021 um 17:22 Uhr

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
}

  • Aber was ist, wenn Sie die Polsterung der Eltern nicht unbedingt kennen?

    Benutzer5707327

    29. August 2018 um 12:01 Uhr

  • Das hat bei mir funktioniert, wenn ich min-width anstelle von width verwende.

    – Pedro Nadolny

    20. Dezember 2018 um 2:08 Uhr

  • @ user5707327 Sie können Stile immer mit Javascript kombinieren, um die Polsterung der Eltern zu erhalten

    – adriancho5692

    12. Juni 2019 um 14:13 Uhr

Benutzer-Avatar
Mitchell Geere

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

  • Sie sollten padding-right:60px auf padding-left:30px;padding-right:30px aufteilen, damit der Inhalt nicht versetzt wird, wenn Sie text-align: center;

    – Lukas

    17. August 2013 um 23:17 Uhr

Benutzer-Avatar
Marnix.hoh

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.

  • Sie sollten padding-right:60px auf padding-left:30px;padding-right:30px aufteilen, damit der Inhalt nicht versetzt wird, wenn Sie text-align: center;

    – Lukas

    17. August 2013 um 23:17 Uhr

Benutzer-Avatar
Honkskillet

margin: 0 -10px; 

ist besser als

margin: -10px;

Letzteres saugt Inhalte vertikal hinein.

1334170cookie-checkIgnorieren Sie die übergeordnete Polsterung

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy