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.

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.

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]