Padding/Margin-inklusive Breiteneinstellung?

Question

Grundsätzlich habe ich ein

, das ich gerne auf eine Breite von 100% haben möchte. Allerdings möchte ich auch, dass es einen gewissen Abstand hat. Wenn ich jedoch den Abstand hinzufüge, wird die Breite dazu addiert, so dass mein

jetzt über den Bildschirmrand hinausgeht und es eine horizontale Bildlaufleiste gibt.

Normalerweise kompensiere ich das einfach, indem ich die Breite des

auf einen niedrigeren Prozentsatz setze (wie 95% oder 90%).

Ich frage mich, ob es elegantere Möglichkeiten gibt, mit dieser Situation umzugehen?

Answer 1

Schauen Sie sich box-sizing an.

.Beispiel {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

Standardmäßig wird die Breite eines Elements unter Berücksichtigung seines Inhaltsfelds berechnet. Daher wird ein angewendeter Padding zur Breite hinzugefügt. Wenn Sie das Box-Modell auf border-box ändern, wird das Padding in die Breite einbezogen. Für Kompatibilität werfen Sie einen Blick auf caniuse.com

Answer 2

Versuchen Sie, das Padding auf 5% und die Breite auf 90% (100-5x2) einzustellen

Answer 3

Es gibt vier Hauptkomponenten des CSS-Box-Modells. i) Margin ii) Border iii) Padding iv) Content

Wenn wir die Breite festlegen, setzen wir im Wesentlichen die Breite des INHALTS fest, sodass das Hinzufügen von Padding eine Gesamtvergrößerung der Breite bedeutet.

Bitte schauen Sie sich die folgenden Ressourcen an und Sie werden alles verstehen.

http://www.w3.org/TR/CSS2/box.html

http://css-tricks.com/the-css-box-model/

Und Sie können diese Situation mit % oder sogar mit der korrekten Berechnung der px-Breite handhaben, wenn Sie auch den Rand festgelegt haben oder sogar die Ränder setzen möchten.

element{
    width: 96%;
    padding: 0 2%;
}

Answer 4

Standardmäßig hat ein div width: auto, was (bei normaler Positionierung, Anzeige und fehlendem Floating) dazu führt, dass es seinen Container ausfüllt (unter Berücksichtigung von Margins, Padding und Border).

Lassen Sie es einfach bei width: auto, anstatt eine explizite oder prozentuale Breite festzulegen.