ChristophTutorials - (Video)Tutorialseite und IT-Blog

Zitat der Woche

Früher hatten wir die spanische Inquisition. Jetzt haben wir die Kompatibilität.
- Herbert Klaeren

Letzte Artikel

Zufällige Artikel

Verzeichnisse

Blogverzeichnis - Blog Verzeichnis bloggerei.de Blogverzeichnis Blog Verzeichnis Blog Top Liste - by TopBlogs.de Blog Button
Datenschutzerklärung
Impressum

CSS - Width inklusive padding/border - 25.08.2013

Eine etwas unpraktische Angelegenheit in CSS ist die standardmäßige Interpretation von width- und height-Werten im Zusammenhang mit padding-Werten und Rahmen. Der width-Wert beinhaltet den padding-Wert und die Rahmendicke nämlich nicht, was irritierend sein mag, da beispielsweise Hintergrundfarben ja auch die gesamte Fläche einschließlich padding ausfüllen.

Man bemerkt dieses unschöne Verhalten zum Beispiel, wenn man versucht, einem Element eine Breite oder Höhe von 100% und gleichzeitig einen padding-Wert ungleich null zu verleihen:

<div style="width: 5em;
            height: 5em;
            border: 1px solid red">
  <div style="width: 100%;
              height: 100%;
              padding: 1em;
              border: 1px solid blue">
  </div>
</div>

Dieser Code führt zu folgendem Ergebnis:

Inneres Element größer als äußeres

Wie man sieht, ragt das innere, blau umrahmte div-Element über das äußere hinaus, was darauf zurückzuführen ist, dass die padding-Werte nicht in dem bei width angegebenen Wert enthalten sind, sondern bei der Berechnung der auf dem Bildschirm angezeigten Breite noch hinzuaddiert werden.

Das Verhalten kann sogar auftreten, ohne dass man einen padding-Wert zugewiesen hat, da Browser für einige Elemente voreingestellte padding-Werte haben. Doch auch, wenn padding auf null gesetzt und nur der Rahmen beibehalten wird, passiert etwas ähnliches. Die Rahmenbreite wurde zur Verdeutlichung auf 5px gesetzt:

Inneres Element größer als äußeres

Auch hier ragt das innere Element über das äußere hinaus, da sich der Rahmen außerhalb des von width und height beschriebenen Bereichs befindet.

Border-box

Mit CSS3 gibt es nun eine Möglichkeit dieses Verhalten zu ändern. Es gibt nun die CSS-Eigenschaft box-sizing. Diese hat standardmäßig den Wert content-box. Um dafür zu sorgen, dass width inklusive padding und border-Dicke gehandhabt wird, muss der Wert border-box zugewiesen werden. Das funktioniert jedoch noch nicht in allen Browsern. Bei Firefox muss die Eigenschaft -moz-box-sizing genutzt werden, für ältere Versionen von Chrome und Safari wird -webkit-box-sizing eingesetzt:

<div style="width: 5em;
            height: 5em;
            border: 5px solid red">
  <div style="width: 100%;
              height: 100%;
              padding: 1em;
              border: 5px solid blue;
              box-sizing: border-box;
              -moz-box-sizing: border-box;
              -webkit-box-sizing: border-box;">
  </div>
</div>

Und nun erhalten wir folgendes Ergebnis:

Jetzt haben die Boxen die richtigen Größen

Wenn man sich die Browserkompatibilität ansieht (caniuse.com/css3-boxsizing) stellte man jedoch ein Problem fest: Beinahe alle derzeit genutzte Browser unterstützen die Eigenschaft, nur der Internet Explorer vor der Version acht nicht. Damit könnte man sich abfinden. Wenn man jedoch viele Besucher hat, die alte Versionen des Internet Explorer benutzen und ihnen nicht zeigen möchte, wie falsch sie handeln, muss man wohl darauf verzichten.

Die Alternative

Möchte man border-box aus Kompatibilitätsgründen nicht einsetzten, muss man padding-Werte und Rahmenbreiten bei der Festlegung von width beziehungsweise height miteinrechnen.

Ist die Breite/Höhe des äußeren Elements bekannt, so ist es meist sinnvoll die padding-Werte und die Rahmenbreite, sowie die Breite/Höhe des inneren Elements in der gleichen Einheit anzugeben. Ist das äußere div etwa 20em breit und möchte man jeweils auf beiden Seiten einen Innenabstand (padding) von 1em und eine Rahmendicke von 0.1em, so wird eine Breite von 17.8em (20em - 2 * 1em - 2 * 0.1 em) angegeben.

Ist dagegen die Breite eines Elements nicht bekannt, weil es zum Beispiel den ganzen Bildschirm oder einen festgelegten Anteil davon einnimmt, so werden width, padding und Rahmendicke in Prozent angegeben. Soll etwa der Rahmen 0.1% dick sein und padding 1% betragen, so ergibt sich ein width-Wert von 97.8%.

Kommentare:

- kein Kommentar -
Um einen Kommentar zu schreiben ist eine Anmeldung nötig.