Ü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

Wenn Sie einen übergeordneten Container mit vertikaler Auffüllung haben und Sie möchten, dass etwas (z. B. ein Bild) innerhalb dieses Containers 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 Abstände ausprobiert.

Answer 2

margin: 0 -10px; 

ist besser als

margin: -10px;

Letztere saugt den Inhalt vertikal in sich hinein.

Answer 3

Hier ist eine andere Möglichkeit.

<style>
    .padded-element{margin: 0px; padding: 10px;}
    .padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
    <img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>

Hier sind einige Beispiele auf repl.it: https://repl.it/@bryku/LightgrayBleakIntercept

Answer 4

Ihr Elternteil ist 120px breit - das ist 100 Breite + 20 Padding auf jeder Seite, so müssen Sie Ihre Zeile 120px breit zu machen. Hier ist der Code. Nächstes Mal beachten Sie, dass Padding addiert sich zu Elementbreite.

#parent
{
    width: 100px;
    padding: 10px;
    background-color: Red;
}

hr
{
    width: 120px;
    margin:0 -10px;
    position:relative;
}

Answer 5

Wenn Sie nach einem Weg für die hr zu gehen gerade von der linken Seite eines Bildschirms auf der rechten Seite ist dies der Code zu verwenden, um sicherzustellen, dass die Ansicht Breite nicht beeinträchtigt wird.

hr {
position: absolute;
left: 0;
right: 0;
}