Julia: body mittig ausrichten mit Rand

Hallo Forum,

ich möchte den body meiner Web-Seite mittig horizontal zentrieren. Das habe ich wie folgt realisiert:


body {
   margin-left: auto;
   margin-right: auto;  
}

Wenn ich aber den View-Port sukzessiv kleiner ziehe, geht der body ab einer bestimmten Breite sowohl links, als auch rechts ganz an die Grenze des Fensters. Ich hätte aber gerne 2em Außenabstand.

Beides gleichzeitig gelingt mir leider nicht.

Kann mir jemand einen Tipp geben?

Danke im Voraus!

Julia

  1. hallo

    Wenn ich aber den View-Port sukzessiv kleiner ziehe, geht der body ab einer bestimmten Breite sowohl links, als auch rechts ganz an die Grenze des Fensters. Ich hätte aber gerne 2em Außenabstand.

    max-width:100%;

    --
    Neu im Forum! Signaturen kann man ausblenden!
    1. Hallo,

      max-width:100%;

      Der body steht schon auf max-width, aber in Pixel. Das sollte auch so bleiben, gibt es eine andere Möglichkeit?

      body {
         max-width: 1000px;
         margin: 2em;
         font-size: 1em;
         margin-left: auto;
         margin-right: auto;
      }
      

      Julia

      1. hallo

        Der body steht schon auf max-width, aber in Pixel. Das sollte auch so bleiben, gibt es eine andere Möglichkeit?

        Du sagst also:

        auch wenn der viewport < 1000px ist, darf der Content 1000px breit sein.

        Du bekommst genau, was du willst.

        Aber eventuell willst du ja

        width:1000px; max-width:100%;

        --
        Neu im Forum! Signaturen kann man ausblenden!
        1. Hallo,

          Aber eventuell willst du ja

          width:1000px; max-width:100%;

          Du meinst:

          body {
             width:1000px; max-width:100%;
             margin: 2em;
             font-size: 1em;
             margin-left: auto;
             margin-right: auto;
          }
          

          Das ändert aber gar nichts.

          Julia

      2. Servus!

        Hallo,

        max-width:100%;

        Der body steht schon auf max-width, aber in Pixel. Das sollte auch so bleiben, gibt es eine andere Möglichkeit?

        body {
           max-width: 1000px;
           margin: 2em;
           font-size: 1em;
           margin-left: auto;
           margin-right: auto;
        }
        

        Und was machst du mit einem Handy mit nur 30em Breite (ca. 480px)?

        Bitte nimm

        html { 
          box-sizing: border-box; 
        } 
        
        *, ::before, ::after { 
        box-sizing: inherit; 
        }
        
        body {
          max-width: 60em;    /* oder max. 75em; maximale Breite, damit Zeilen nicht zu lang sind */
          margin: 2em auto;     /* zentriert, 2em Abstand oben und unten */
          padding: 2em;       /* sorgt für Innenabstand, wenn die Breite 100% beträgt */
        }
        
        

        Das box-sizing sorgt dafür, dass der Innenabstand zu den 100% gehört und nicht dazugerechnet wird.

        Herzliche Grüße

        Matthias Scharwies

        --
        Es gibt viel zu tun: ToDo-Liste
        1. Hallo,

          Bitte nimm ...

          Dankeschön, damit funktioniert genau das, was ich haben will. Und auch, wenn ich anstatt 60em 1000px nehme, das brauche ich nämlich so. Ich brauche eine absolute Breite der gesamten Seite.

          Aber kannst du mir auch genau erklären, was ich nun gemacht habe? Ich verstehe das nämlich noch nicht so ganz.

          Julia

        2. @@Matthias Scharwies

          Bitte nimm

          html { 
            box-sizing: border-box; 
          } 
          
          *, ::before, ::after { 
          box-sizing: inherit; 
          }
          

          Bitte nicht. Sondern

          *, ::before, ::after { 
            box-sizing: border-box; 
          } 
          

          Begib dich direkt dorthin; gehe nicht über Vererbung.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. Servus!

            @@Matthias Scharwies

            Bitte nimm

            html { 
              box-sizing: border-box; 
            } 
            
            *, ::before, ::after { 
            box-sizing: inherit; 
            }
            

            Bitte nicht. Sondern

            *, ::before, ::after { 
              box-sizing: border-box; 
            } 
            

            Begib dich direkt dorthin; gehe nicht über Vererbung.

            Ok, aber warum?

            Chris Coyier: Inheriting box-sizing Probably Slightly Better Best-Practice By Chris Coyier On July 15, 2014

            LLAP 🖖

            Herzliche Grüße

            Matthias Scharwies

            --
            Es gibt viel zu tun: ToDo-Liste
            1. @@Matthias Scharwies

              Begib dich direkt dorthin; gehe nicht über Vererbung. Ok, aber warum?

              “There’s a reason that box model doesn’t inherit by default, and there’s no reason that it should inherit. We don’t inherit margins, we don’t inherit borders. Layouts should not be inherited; layouts don’t nest in that way. So I don’t recommend this solution.”
              —Miriam Suzanne, Don’t use my grid system or any others (ab 8:15)

              Danke an Robert fürs Raussuchen.

              LLAP 🖖

              --
              „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
              1. Servus!

                @Gunnar Bittersmann

                Danke, hab's so in's Wiki übernommen.

                Herzliche Grüße

                Matthias Scharwies

                --
                Es gibt viel zu tun: ToDo-Liste
  2. Hallo

    Ich würde folgendes CSS für den body verwenden:

             width: calc(100% - 4em);
             max-width: 1000px;
             margin: 2rem auto;
    

    Gruss

    MrMurphy

    1. Ich würde folgendes CSS für den body verwenden:

               width: calc(100% - 4em);
               max-width: 1000px;
               margin: 2rem auto;
      

      Hallo,

      danke, damit funktioniert es auch sehr schön.

      Aber welche Lösung ist nun die bessere?

      Einfacher zu verstehen ist diese hier.

      Julia

      1. Hallo

        Aber welche Lösung ist nun die bessere?

        Das kommt darauf an was du mit dem body noch so vorhast.

        Wenn du beispielsweise dem body noch einen Rahmen oder eine Hintergrundfarbe geben willst, die nicht bis an den Fensterrand reichen sollen, ist meine Lösung besser geeignet.

        Meine Lösung ist zudem deiner ursprünglichen Fragestellung näher, bei der es dir ja nur um den margin ging.

        Gruss

        MrMurphy

        1. Hallo,

          Wenn du beispielsweise dem body noch einen Rahmen oder eine Hintergrundfarbe geben willst, die nicht bis an den Fensterrand reichen sollen, ist meine Lösung besser geeignet.

          Meine Lösung ist zudem deiner ursprünglichen Fragestellung näher, bei der es dir ja nur um den margin ging.

          Zu 1, das will ich nicht. Und zu 2, ja, es ging mir nur um margin. Und Dein Code ist mir auch etwas verständlicher.

          Dann bedanke ich mich bei Dir und auch bei Matthias, dessen Code auch prima funktioniert, und würde gerne Deinen Code nehmen, weil ich ihn besser verstehe. Das Einzige, was ich nicht ganz verstehe, ist die Reihenfolge Deiner Zeilen. Warum nicht zuerst die max-width-Zeile und danach die Zeile mit der Kalkulation?

          Julia

          1. Hallo

            Die Reihenfolge spielt in diesem Fall keine Rolle. Die kannst du beliebig ändern.

            Gruss

            MrMurphy

        2. @@MrMurphy1

          Wenn du beispielsweise dem body noch einen Rahmen oder eine Hintergrundfarbe geben willst, die nicht bis an den Fensterrand reichen sollen, ist meine Lösung besser geeignet.

          Nö, von besser würde ich da nicht sprechen.

          In dem Fall kann man auch ganz einfach padding sowohl fürs html-Element als auch für body angeben.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      2. @@Julia

        Aber welche Lösung ist nun die bessere?

        Die einfachere. Ich würde sagen: die mit padding ohne calc()

        Einfacher zu verstehen ist diese hier.

        … aber wenn jene für dich einfacher ist, nimmste eben jene.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  3. @@Julia

    ich möchte den body meiner Web-Seite mittig horizontal zentrieren. […] Ich hätte aber gerne 2em Außenabstand.

    Eine weitere einfache Möglichkeit, das zu erreichen, bietet CSS Grid. Siehe Bologna.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann