Frage Überfüllung ignorieren


Ich versuche, meine horizontale Regel dazu zu bringen, das übergeordnete Padding 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 Regel um 10 Pixel außerhalb des übergeordneten Elements erstreckt. Ich versuche, das Padding, das alles andere im übergeordneten div benötigt, zu ignorieren.

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


75
2017-11-28 11:32


Ursprung


Antworten:


Einfache Lösung, einfach

margin:-10px

auf der hr.


102
2017-11-28 11:39



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

Geige: Geige Beispiel ..


7
2018-01-07 20:19



Im Großen und Ganzen wurde diese Frage in kleinen Teilen von allen beantwortet. Ich habe mich vor einer Minute damit beschäftigt.

Ich wollte ein Knopffach an der Unterseite eines Panels haben, wo das Panel rundum 30px hat. Das Tastenfach 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 zu fahren. Die oben genannten Schlüsselelemente gleichen jedoch alle übergeordneten Füllzeichen mit übereinstimmenden negativen Rändern für das untergeordnete Element aus. Dann am kritischsten, wenn Sie das Kind in voller Breite ausführen möchten, dann setzen Sie die Breite auf auto. (wie in einem Kommentar oben erwähnt von schlingel).


6
2017-08-29 07:26



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
}

6
2017-08-10 13:27



Das Problem könnte darin bestehen, welches Boxmodell Sie verwenden. Verwenden Sie IE?

Wenn IE im Quirks-Modus ist, width ist die äußere Breite Ihrer Box, was bedeutet, dass die Polsterung innen ist. Also ist die Gesamtfläche innerhalb der Box 100px - 2 * 10px = 80px In diesem Fall ist Ihre 100px breit <hr> wird nicht richtig aussehen.

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

Um es zu lösen, passen Sie entweder Ihre CSS-Werte für IE an. (Check in Firefox um zu sehen, ob es dort in Ordnung aussieht). Oder noch besser, legen Sie einen Dokumenttyp fest, um den Browser in den strikten Modus zu versetzen - wobei auch 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


1
2017-11-28 12:16



Dein Elternteil ist 120 Pixel breit - das ist 100 Breite + 20 Auffüllen auf jeder Seite, also musst du deine Zeile 120 Pixel breit machen. Hier ist der Code. Beim nächsten Mal beachten Sie, dass das Padding zur Elementbreite beiträgt.

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

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

1
2017-11-28 12:19



margin: 0 -10px; 

ist besser als

margin: -10px;

Der spätere saugt Inhalt vertikal hinein.


0
2018-03-04 01:23