Elternpolster ignorieren

126

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

Hier ist ein einfaches Beispiel für das, was ich habe:

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

Sie werden feststellen, dass sich die horizontale Regel um 10 Pixel aus dem übergeordneten Element heraus erstreckt. Ich versuche, die Auffüllung 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. Dies ist nicht die Lösung, die ich suche.

html css

— Sam
quelle

160

Einfache Lösung, einfach tun

margin:-10px

auf der hr.

— Sam
quelle

9

Dies funktioniert, aber das Problem ist, dass es nicht die gesamte Länge des übergeordneten Div verlängert. Dies liegt daran, dass die Polsterung NICHT in der 100px-Breite enthalten ist. Dies bedeutet, dass sie tatsächlich 120px breit ist und Sie <hr>20px vom Ende Ihres Div entfernt sind. Sehen Sie diese jsFiddle für das, was ich meine: jsfiddle.net/YVrWy/1

— Alastair Pitts

Ja, das habe ich herausgefunden, als ich es hinzugefügt habe. Die Breite spielt keine Rolle.

— Sam

22

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

— Schlingel

4

Sie sollten so etwas wie ... margin: 0 -15px; ..... andernfalls saugt die Stunde den angrenzenden Inhalt vertikal an.

— Honkskillet

irgendwie hackisch.

— Ich

29

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
}

— adriancho5692
quelle

8

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

1

Dies hat bei mir funktioniert, wenn ich min-width anstelle von nur width verwende.

— Pedro Nadolny

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

— adriancho5692

Wow, geniale Verwendung negativer Breiten!

— Mr PizzaGuy

9

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

Ich wollte eine Knopfleiste am unteren Rand eines Panels haben, in der das Panel ringsum 30 Pixel hat. 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 hier mit mehr Fleisch auf die Idee zu fahren. Die oben genannten Schlüsselelemente versetzen jedoch alle übergeordneten Auffüllungen mit übereinstimmenden negativen Rändern des untergeordneten Elements. Am kritischsten ist es dann, wenn Sie das untergeordnete Element in voller Breite ausführen möchten, und setzen Sie dann width auf auto. (wie oben in einem Kommentar von schlingel erwähnt ).

— Mitchell Geere
quelle

7

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

Geige: Geige Beispiel ..

— sqram
quelle

1

Sie sollten das Auffüllen nach rechts: 60px in das Auffüllen nach links: 30px; das Auffüllen nach rechts: 30px teilen, damit der Inhalt nicht versetzt wird, wenn Sie text-align: center verwenden.

— Luke

3

margin: 0 -10px;

ist besser als

margin: -10px;

Letzteres saugt Inhalte vertikal hinein.

— Honkskillet
quelle

2

Ihr Elternteil ist 120 Pixel breit - das sind 100 Breite + 20 Polster auf jeder Seite, sodass Sie Ihre Linie 120 Pixel breit machen müssen. Hier ist der Code. Beachten Sie beim nächsten Mal, dass sich das Auffüllen zur Elementbreite summiert.

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

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

— easwee
quelle

1

Mit definierter Breite ist das einfach. Problem ist, wenn Sie Breite nicht kennen

— Guilherme Ferreira

@ GuilhermeFerreira Verwendung width: auto;in hr. jsfiddle.net/ToolmakerSteve/7p85dsrq/3 Leider erfordert diese Lösung immer noch Kenntnisse, paddingdie vom Elternteil festgelegt wurden.

— ToolmakerSteve

1

Das Problem könnte darin liegen, welches Box-Modell Sie verwenden. Verwenden Sie IE?

Wenn sich der IE im Mackenmodus befindet, widthist dies die äußere Breite Ihrer Box, was bedeutet, dass sich die Polsterung im Inneren befindet. Die gesamte 100px - 2 * 10px = 80pxverbleibende Fläche in der Box ist also. In diesem Fall sieht Ihre 100 Pixel breite <hr>nicht richtig aus.

Wenn Sie sich im Standardmodus befinden, width ist die innere Breite Ihrer Box und die Polsterung wird außen hinzugefügt. Die Gesamtbreite der Box 100px + 2 * 10px = 120pxbelässt also genau 100 Pixel in der Box für Sie <hr>.

Um dies zu lösen, passen Sie entweder Ihre CSS-Werte für IE an. (Überprüfen Sie in Firefox, ob es dort in Ordnung aussieht). Oder noch besser, stellen Sie einen Dokumenttyp ein, um den Browser in den strengen Modus zu versetzen - wobei auch der IE dem Standard-Box-Modell folgt.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
 ...

http://www.quirksmode.org/css/quirksmode.html

— Martin Algesten
quelle

1

Wenn Sie einen übergeordneten Container mit vertikaler Auffüllung haben und möchten, dass etwas (z. B. ein Bild) in diesem Container die 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 nicht viel zu bedeuten. Ich habe dies nicht für horizontale Polsterungen versucht.

— Marnix.hoh
quelle

0

einfache Lösung .. zum übergeordneten div hinzufügen:

Box-Größe: Border-Box;

— Jaclyn U.
quelle

0

Hier ist eine andere Möglichkeit, dies zu tun.

<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 einige Beispiele auf repl.it: https://repl.it/@bryku/LightgrayBleakIntercept

— Dillon Burnett
quelle