Erweiterung von Elementen in CSS für JavaScript

Das Setzen der CSS-Eigenschaften width und height garantiert nicht, dass das Element die angegebene Größe annimmt. Schauen wir uns das an Beispielen an.

Beispiel

Jetzt stimmen die Abmessungen des Elements mit den vorgegebenen überein:

html<div id="elem">
  text
</div>

css#elem {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
}

Результат:

Beispiel

Jetzt weisen wir dem Element die Eigenschaft padding zu. Als Ergebnis wird die tatsächliche Breite des Elements größer und erweitert sich um den angegebenen Wert des Innenabstands:

html<div id="elem">
  text
</div>

css#elem {
  padding: 25px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
}

Результат:

Beispiel

Das Vorhandensein eines Rahmens erweitert das Element ebenfalls:

html<div id="elem">
  text
</div>

css#elem {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
  border: 20px solid #F0D7A1;
}

Результат:

Beispiel

Die Eigenschaft box-sizing ermöglicht es, das oben beschriebene Verhalten zu ändern. Man kann bewirken, dass weder der Innenabstand noch der Rahmen das Element erweitern. Dafür muss dieser Eigenschaft der Wert border-box zugewiesen werden:

html<div id="elem">
  text
</div>

css#elem {
  box-sizing: border-box;
  padding: 20px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
  background: #CFF5BF;
  border: 20px solid #F0D7A1;
}

Результат:

Bedeutung des Beschriebenen

Aus der Sicht von JavaScript ist die beschriebene Situation nicht sehr praktisch. Denn es stellt sich heraus, dass wir, wenn wir den Wert der Eigenschaft width auslesen, keineswegs sicher sein können, dass das Element genau diese Breite haben wird.