CSS/Eigenschaften/box-sizing

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft box-sizing können Sie bestimmen, worauf sich Angaben zu den Abmessungen eines Elementes beziehen.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari

Details: caniuse.com

Erlaubt sind dabei eine der folgenden Angaben.

  • content-box, Standardwert, Angabe gilt nur für den Inhalt
  • border-box, Angabe gilt für Inhalt, Innenabstand und Rahmen, Standard für IE im Quirksmodus
  • inherit, box-sizing des Elternelements
Empfehlung: Zum besseren Verständnis wird das Studium des Artikels zum Box-Modell empfohlen.
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>box-sizing</title>
    <style>
      main { text-align: center; }
      aside {
        border: 1px solid white;
        border-top-style: none;
        display: block;
        margin: 0.2em auto 2em;
        width: 20em;
      }
      main code {
        display: inline-block;
        margin-top: 4em;
      }
      main aside code { display: inline; }
      section {
        background: lightgreen;
        background-clip: content-box;
        border: 1em solid green;
        height: 10em;
        padding: 1em;
        margin: 2em auto .2em;
        width: 20em;
      }
      #content-box {
        box-sizing: content-box;
      }
      #border-box {
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <h1>Verwendung von <code>box-sizing</code></h1>
    <main>
      <section id="content-box">
        <code>width: 20em;<br>box-sizing: content-box;</code>
      </section>
      <aside><code>← 20em →</code></aside>
      <section id="border-box">
        <code>width: 20em;<br>box-sizing: border-box;</code>
      </section>
      <aside><code>← 20em →</code></aside>
    </main>
  </body>
</html>
Dieses Beispiel enthält zwei section-Elemente die jeweils einen Rahmen und einen Innenabstand der Breite 1em haben. Ebenso haben beide eine Breite von 20em zugewiesen bekommen.
Beim ersten section-Element wird eine Inhaltsbreite von 20em festgelegt, beim zweiten Element ergeben sich die 20em als Summe der Breiten von Inhalt, Innenabstand und Rahmen.

Vererbung auf alle Elemente[Bearbeiten]

Empfehlung: Sie sollten im Sinne einer guten Wartbarkeit des CSS-Codes auf verschiedene Werte von box-sizing innerhalb eines Dokuments verzichten.

css-tricks schlug vor, den Wert für box-sizing zu vererben: Inheriting box-sizing Probably Slightly Better Best-Practice By Chris Coyier On July 15, 2014

Die Eigenschaft box-sizing wird nicht automatisch vererbt. Falls man verschiedene Werte für box-sizing in einem Dokument nutzen muss, wäre folgendes zielführend:

Beispiel: Vererbung von box-sizing
html { box-sizing: border-box; } *, ::before, ::after { box-sizing: inherit; }
Die Eigenschaft box-sizing wird nur für html eingestellt und alle Elemente erben den Wert ihres Elternelements. Hierdurch wird eine Änderung bei einem Element auf dessen Kindelemente weitervererbt. Bei *, ::before, ::after {box-sizing: border-box;} würden die Kindelemente einen anderen Ausgangswert nicht übernehmen.

Noch einfacher ist es, auf die Vererbung zu verzichten und einfach bei allen Elementen den Wert für box-sizing festzulegen:

“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)

Beispiel: Normalisierung von box-sizing
*, ::before, ::after { box-sizing: border-box; }
Die Eigenschaft box-sizing wird für alle Elemente auf border-box gestellt.

Geschichtliches[Bearbeiten]

Die ursprüngliche Definition, die Angaben von width und height als Abmessungen lediglich des Inhaltes festzulegen ist wenig intuitiv. Eigentlich erwartet man, dass eine Breiten- bzw. Höhenangabe den gesamten Platzbedarf des Elementes widerspiegelt.

Zudem interpretierten alte Internetexplorer das Box-Modell falsch, sodass Webentwickler auf diese besondere Rücksicht nehmen mussten. Ebenso war es schwierig bis unmöglich, ein responsives Layout zu erstellen, welches etwa prozentuale Breitenangaben mit pixelgenauen Angaben für die Rahmenbreite kombinierte.

Weblinks[Bearbeiten]