195 Stimmen

Übergeordnete Polsterung ignorieren

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.

1voto

Martin Algesten Punkte 12167

Das Problem könnte darauf zurückzuführen sein, welches Boxenmodell Sie verwenden. Verwenden Sie den IE?

Wenn sich der IE im Quirks-Modus befindet, width ist die äußere Breite des Rahmens, d. h. die Polsterung befindet sich innerhalb. Die Gesamtfläche, die innerhalb des Kastens verbleibt, ist also 100px - 2 * 10px = 80px in diesem Fall Ihre 100px breit <hr> wird nicht richtig aussehen.

Wenn Sie im Standardmodus sind, width ist die innere Breite des Kastens, und die Füllung wird außen hinzugefügt. Die Gesamtbreite des Kastens ist also 100px + 2 * 10px = 120px lassen Sie genau 100px innerhalb der Box für Ihre <hr> .

Um das Problem zu lösen, passen Sie entweder Ihre CSS-Werte für den IE an (prüfen Sie in Firefox, ob es dort gut aussieht). Oder noch besser, legen Sie einen Dokumenttyp fest, um den Browser in den Strict-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

-2voto

Jaclyn U Punkte 645

Einfache Lösung: zum übergeordneten Div hinzufügen:

box-sizing: border-box;

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X