Container soll Seitenfüllen sein, und skallierbar

[beatovich]

hallo

Ok. Das erklärt mir aber zweierlei nicht:

• Warum bekomme ich 4% Rand, wenn ich margin-top: 2% hinschreibe (Body ist 677px hoch, margin-top ist 26px statt der erwarteten 13px)
• Warum bleibt margin-top gleich hoch, wenn ich den Ausgabebereich von jsfiddle höher und niedriger mache?

Das Verhalten ist übrigens das Gleiche, wenn ich statt margin-top auf dem main Element dem Body ein padding-top gebe.

JSFiddle stellt die Ausgabe in einem iframe dar. Kann das ein Problem auslösen? Dass er das Browserfenster als Bezug genommen hat statt des iframe selbst? Würde mich beim aktuellen Chrome eigentlich wundern. In ein eigenes HTML-Dokument übertragen hab ich's noch nicht - mache ich nachher mal.

Rolf

Ich würde mich für solche experimente mehr auf die Browsereigenen Entwicklertools verlassen. Bezüglich iframes rate ich hier eher dass vh und vw den Viewport meinen und das ist in dem Fall nicht der Bildschirm.

für die Details für die margin-Berechnung verweise ich besser auf die Spec https://www.w3.org/TR/CSS2/box.html#margin-properties wo auch spezifiziert ist, dass unter bestimmten Bedingungen für margin-top/margin-bottom die width als basis genommen wird.