Mindestaußenabstand

Geschrieben am: 18.2.2016

Die Eigenschaft min-margin gibt’s nicht, aber ein Mindestaußenabstand lässt sich mit calc() faken.

Bevor ich dazu komme, aber kurz zur Funktionsweise von max-width. Da gibt es nämlich ein interessantes Verhalten bei untypischen Angaben.

max-width klassisch

Ich dachte immer, ich weiß, wie max-width funktioniert. Und im Normalfall ist max-width ja auch intuitiv. Beispielsweise kann man eine Breite in Prozent vorgeben und eine Maximalbreite in Pixeln (bei echten Projekten ist em besser als Pixel, aber ich möchte das hier zu Demozwecken einfach halten).

div { 
  width: 90%; 
  max-width: 800px; 
}

Damit nimmt das Element 90% des verfügbaren Platzes ein, wird aber nie breiter als 800px. Soweit klar.

max-width und width mit derselben Einheit

Sehen wir uns an, was passiert, wenn dieselbe Einheit bei max-width und width benutzt wird. Im ersten Fall ist max-width größer als width. In diesem Fall hat max-width keine Auswirkung; das Element ist 400px breit.

div:nth-child(1){ 
  max-width: 600px; 
  width: 400px; 
}

Interessanter wird es, wenn max-width kleiner ist als width. Dann setzt sich nämlich max-width durch:

div:nth-child(2){ 
  max-width: 400px; 
  width: 600px;
}

In diesem Fall ist das Element 400px breit.

Spannend ist es also, wenn max-width kleiner als width ist oder wenn es eben nicht klar ist, was kleiner ist. Darüber kann man nämlich durch Zuhilfenahme von calc() einen Mindestaußenabstand definieren. In folgendem Beispiel ist die Breite auf 800px. Wenn hingegen weniger Platz zur Verfügung steht, wird das Element dank der max-width-Angabe schmaler, ein Außenabstand von 1.5em rechts und 1.5em links gibt es aber immer (die 3em, die abgezogen werden). Damit haben wir einen Mindestaußenabstand von 1.5em.

div:nth-child(3){ 
  margin: 0 auto; 
  max-width: calc(100% - 3em); 
  width: 800px; 
}

Zuerst konnte ich es nicht glauben, dass das wirklich funktioniert, weil mir das Zusammenspiel von width und max-width nicht klar war. Dass es wie gewünscht funktioniert liegt eben daran, dass sich max-width gegenüber width durchsetzt, wenn max-width kleiner ist als width.

Einen Mindestaußenabstand habe ich schon manchmal gesucht und bin froh über diese Lösung.

calc() bei max-width bei JSFiddle

Florence Maurice