TS: Margin beim FF 38.0.5 und 39.0

Hallo und guten Nachmittag,

gilt der Margin beim Body-Element eigentlich rundherum, also links, rechts, oben, unten?

Firefox 38.05 und auch 39.0 unterschlagen den rechten Margin. Ist das nun Absicht oder Nachlässigkeit?

Der obere Margin fällt mit dem des Elementes zusammen, der linke wird aufaddiert. Der Rechte wird immer unterschlagen. Muss ich das verstehen?

Grüße
TS

  1. Hallo

    gilt der Margin beim Body-Element eigentlich rundherum, also links, rechts, oben, unten?

    Ja.

    Der obere Margin fällt mit dem des Elementes zusammen

    Das hört sich noch "Collapsing Margins" an. Das Verhalten ist bei allen Browsern so vorgesehen.

    der linke wird aufaddiert

    Korrektes Verhalten.

    Der Rechte wird immer unterschlagen. Muss ich das verstehen?

    Das wird nichts mit dem Firefox zu tun haben sondern an deinem fehlerhaften Quelltext.

    Gruss

    MrMurphy

    1. Hallo und guten Morgen,

      gilt der Margin beim Body-Element eigentlich rundherum, also links, rechts, oben, unten?

      Ja.

      Der obere Margin fällt mit dem des Elementes zusammen

      Das hört sich noch "Collapsing Margins" an. Das Verhalten ist bei allen Browsern so vorgesehen.

      Das war mir klar. Es funktioniert, wie erwartet.

      der linke wird aufaddiert

      Korrektes Verhalten.

      Warum ist das links anders geregelt, als oben?

      Der Rechte wird immer unterschlagen. Muss ich das verstehen?

      Das wird nichts mit dem Firefox zu tun haben sondern an deinem fehlerhaften Quelltext.

      <!Doctype html>
      <html>
      <head>
          <meta charset="utf-8">
          <style type="text/css">
          
              body {
                  margin: 10px;
              }
      
              #panorama {
                  width: 2000px;
                  height: 800px;
                  background: #FFFF80;
                  z-index: -3;
                  border: 1px solid blue;
                  /* margin: 20px; */
              }
              
              #content {
                  margin-top: -500px;
                  margin-left: 300px;
                  min-height: 200px;
                  width: 300px;
                  background: #FF0000;
                  border: 1px solid blue;
              }
          
          </style>
          <title>Margins</title>
      </head>
      <body>
      
          <div id="panorama">
         
          </div>
      
          <div id="content">
              Hallo, hier steht Text, ganz viel Text, noch mehr Text,
              Hallo, hier steht Text, ganz viel Text, noch mehr Text
              Hallo, hier steht Text, ganz viel Text, noch mehr Text,
              Hallo, hier steht Text, ganz viel Text, noch mehr Text
              Hallo, hier steht Text, ganz viel Text, noch mehr Text,
              Hallo, hier steht Text, ganz viel Text, noch mehr Text
              Hallo, hier steht Text, ganz viel Text, noch mehr Text,
              Hallo, hier steht Text, ganz viel Text, noch mehr Text
              Hallo, hier steht Text, ganz viel Text, noch mehr Text,
              Hallo, hier steht Text, ganz viel Text, noch mehr Text
              Hallo, hier steht Text, ganz viel Text, noch mehr Text,
              Hallo, hier steht Text, ganz viel Text, noch mehr Text
              Hallo, hier steht Text, ganz viel Text, noch mehr Text,
              Hallo, hier steht Text, ganz viel Text, noch mehr Text
              Hallo, hier steht Text, ganz viel Text, noch mehr Text,
              Hallo, hier steht Text, ganz viel Text, noch mehr Text
              Hallo, hier steht Text, ganz viel Text, noch mehr Text,
              Hallo, hier steht Text, ganz viel Text, noch mehr Text
              Hallo, hier steht Text, ganz viel Text, noch mehr Text,
              Hallo, hier steht Text, ganz viel Text, noch mehr Text
          </div>
      
      
      </body>
      </html>
      

      Wo steckt denn der Fehler? Der Nu-Validater hat nichts gemeckert.

      Grüße
      TS

      1. Tach,

        Warum ist das links anders geregelt, als oben?

        vertikale Margins treffen viel häufiger aufeinander. Und wenn du z.B. Bildern immer einen Abstand von 1em und Überschriften imemr einen margin-top von 2em geben willst, musst du nicht die Extra-Regel img + h2 einfügen, falls ein Absatz mal ein Bild am Ende enthält.

        mfg
        Woodfighter

        1. Hallo und guten Morgen,

          Warum ist das links anders geregelt, als oben?

          vertikale Margins treffen viel häufiger aufeinander. Und wenn du z.B. Bildern immer einen Abstand von 1em und Überschriften imemr einen margin-top von 2em geben willst, musst du nicht die Extra-Regel img + h2 einfügen, falls ein Absatz mal ein Bild am Ende enthält.

          Bahnhof?

          Grüße
          TS

          1. Tach,

            Warum ist das links anders geregelt, als oben?

            vertikale Margins treffen viel häufiger aufeinander. Und wenn du z.B. Bildern immer einen Abstand von 1em und Überschriften imemr einen margin-top von 2em geben willst, musst du nicht die Extra-Regel img + h2 einfügen, falls ein Absatz mal ein Bild am Ende enthält.

            Bahnhof?

            Ist https://css-tricks.com/almanac/properties/m/margin/ mit den Beispielen unter Collapsing margins ausreichend?

            mfg
            Woodfighter

            1. Hallo und guten Morgen,

              Warum ist das links anders geregelt, als oben?

              vertikale Margins treffen viel häufiger aufeinander. Und wenn du z.B. Bildern immer einen Abstand von 1em und Überschriften imemr einen margin-top von 2em geben willst, musst du nicht die Extra-Regel img + h2 einfügen, falls ein Absatz mal ein Bild am Ende enthält.

              Bahnhof?

              Ist https://css-tricks.com/almanac/properties/m/margin/ mit den Beispielen unter Collapsing margins ausreichend?

              Na, zumindest steht da schon mal ein Satz, der die Hälfte erklärt:

              Vertical margins on different elements that touch each other (thus have no content, padding, or borders separating them) will collapse, forming a single margin that is equal to the greater of the adjoining margins. This does not happen on horizontal margins (left and right), only vertical (top and bottom).
              

              Ich lese daraus, dass horizontale Ränder grundsätzlich nicht zusammengefasst werden, sondern (vermutlich immer) addiert.

              Allerdings ist es in unserem WIKI auch icht vernünftig beschrieben:

              http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Abstand/margin#Au.C3.9Fenabst.C3.A4nde_links_und_rechts

              Sie können den rechten Außenabstand eines Elements festlegen. Wenn das Element einen rechten Nachbarn hat (etwa bei zwei nebeneinanderliegenden Grafiken die erste der beiden), dann bedeutet die Angabe den Abstand zum rechts davon liegenden Element. Wenn das Element keinen rechten Nachbarn hat (etwa ein normaler Textabsatz), dann bedeutet die Angabe den Rand relativ zum Elternelement (z.B. zum Seitenrand, der für das body-Element festgelegt ist). Wenn kein übergeordnetes Elternelement mehr da ist (also beim body-Element selbst), dann bezieht sich die Angabe auf den rechten Abstand des Dokumentinhalts vom Anzeigefenster. 
              

              Und wie ich nun meine Wette doch noch gewinnen kann, weiß ich immer noch nicht. Das kostet jetzt 'ne Kiste Bier :-O

              Ich war der Meinung, man könne (den Text des Self-Wiki im Kopf) den rechten Rand trotz Streckung des Elementes festlegen. Da geht aber überhaupt nichts!

              Den blöden Versuch hätten wir hier ja gar nicht gemacht, wenn Linuchs nicht die Frage mit dem Panoramabild hinter dem Content gestellt hätte. DER ist Schuld ;-)

              Grüße
              TS

      2. Hallo,

        Der Rechte wird immer unterschlagen. Muss ich das verstehen?

        Du gibst sowohl margin als auch width an, vielleicht probierst du mal max-width?

        Gruß
        Kalk

        1. Hallo und guten Morgen,

          Der Rechte wird immer unterschlagen. Muss ich das verstehen?

          Du gibst sowohl margin als auch width an, vielleicht probierst du mal max-width?

          Ich habe alles denkbare ausprobiert und trotzdem vermutlich meine Wette verloren, man könne es doch mit CSS einstellen, dass auch rechts ein Margin von 10px bleibt. ATSCH

          Wenn der Panorama-Container das umhüllende Element streckt, bekomme ich es nicht hin, dass in der Richtung der Streckung noch ein Margin oder ein Padding bleibt.

          Grüße
          TS

          1. Hallo,

            Du gibst sowohl margin als auch width an, vielleicht probierst du mal max-width?

            Ich habe alles denkbare ausprobiert und trotzdem vermutlich meine Wette verloren, man könne es doch mit CSS einstellen, dass auch rechts ein Margin von 10px bleibt. ATSCH

            Wenn der Panorama-Container das umhüllende Element streckt, bekomme ich es nicht hin, dass in der Richtung der Streckung noch ein Margin oder ein Padding bleibt.

            Ich hab in deinem Code nur width durch max-width ersetzt und als Ergebnis das bekommen, was du hier beschreibst.

            Gruß
            Kalk

            1. Hallo und guten Morgen,

              Hallo,

              Du gibst sowohl margin als auch width an, vielleicht probierst du mal max-width?

              Ich habe alles denkbare ausprobiert und trotzdem vermutlich meine Wette verloren, man könne es doch mit CSS einstellen, dass auch rechts ein Margin von 10px bleibt. ATSCH

              Wenn der Panorama-Container das umhüllende Element streckt, bekomme ich es nicht hin, dass in der Richtung der Streckung noch ein Margin oder ein Padding bleibt.

              Ich hab in deinem Code nur width durch max-width ersetzt und als Ergebnis das bekommen, was du hier beschreibst.

              Nein, leider nicht.

              Es soll rund um das Element mit der festgelegten (Mindest-)Breite ein Margin von 10px zum Elternelement bzw. zum body (also dann Fensterrand) bleiben.

              Grüße
              TS

              1. Hallo,

                Nein, leider nicht.

                Es soll rund um das Element mit der festgelegten (Mindest-)Breite ein Margin von 10px zum Elternelement bzw. zum body (also dann Fensterrand) bleiben.

                Da hab ich wohl den unteren Rand vernächlassigt. Wie wärs mit padding fürs html-Element?

                Gruß
                Kalk

                1. Hallo und guten Morgen,

                  Nein, leider nicht.

                  Es soll rund um das Element mit der festgelegten (Mindest-)Breite ein Margin von 10px zum Elternelement bzw. zum body (also dann Fensterrand) bleiben.

                  Da hab ich wohl den unteren Rand vernächlassigt. Wie wärs mit padding fürs html-Element?

                  Rechts geht es auch nicht, wenn das Element breiter ist, als die initiale Viewportbreite.
                  Ich habe jetzt bestimmt 30 Ideen ausprobiert, aber keine hat's gebracht.

                  Ich gebe auf.
                  Die Kiste Bier wird langsam billiger, als noch mehr Zeit mit diesem HTML/CSS-Schrott zu verplempern.

                  Grüße
                  TS

                  1. Hallo,

                    Da hab ich wohl den unteren Rand vernächlassigt. Wie wärs mit padding fürs html-Element?

                    Das Problem verursacht der völlig verschobene content-contäner. Wenn dem ausreichend margin-bottom gegeben wird, kriegt man unten einen Rand hin. Die Frage ist, viewiel man dort angeben muss.

                    Wahrscheinlich sollte man das Markup anpassen. Kann content Kind von Panorama sein?

                    Gruß
                    Kalk