Utökning av element i CSS för JavaScript

Att sätta CSS-egenskaperna width och height garanterar inte att elementet får den angivna storleken. Låt oss titta på exempel.

Exempel

Just nu sammanfaller elementets dimensioner med de angivna:

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

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

Результат:

Exempel

Och låt oss nu sätta egenskapen padding för elementet. Som ett resultat kommer elementets faktiska bredd att bli större och expandera med det angivna värdet för innermarginal:

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

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

Результат:

Exempel

Närvaron av en kantlinje utökar också elementet:

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

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

Результат:

Exempel

Egenskapen box-sizing tillåter oss att ändra beteendet som beskrivits ovan. Det är möjligt att göra så att varken innermarginal eller kantlinje utökar elementet. För att göra detta måste egenskapen tilldelas värdet border-box:

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;
}

Результат:

Betydelsen av det beskrivna

Ur ett JavaScript-perspektiv är den beskrivna situationen inte särskilt bekväm. Det visar sig ju att genom att läsa värdet på egenskapen width kan vi inte alls vara säkra på att elementet kommer att ha just den bredden.