Udvidelse af elementer i CSS for JavaScript

Tildeling af CSS-egenskaberne width og height garanterer ikke, at elementet får den angivne størrelse. Lad os se på eksempler.

Eksempel

Lige nu matcher elementets dimensioner de angivne:

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

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

Результат:

Eksempel

Og lad os nu give elementet egenskaben padding. Som et resultat vil den faktiske bredde af elementet blive større og udvides med den angivne værdi for indre afstand:

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

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

Результат:

Eksempel

Tilstedeværelsen af en grænse udvider også elementet:

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

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

Результат:

Eksempel

Egenskaben box-sizing tillader at ændre beskrevet adfærd. Det er muligt at gøre således, at hverken indre afstand eller grænse udvider elementet. For at gøre dette skal denne egenskab tildeles værdien 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;
}

Результат:

Vigtigheden af det beskrevne

Fra JavaScript-synspunktet er den beskrevne situation ikke særlig bekvem. Det viser sig trods alt, at ved at læse værdien af egenskaben width kan vi slet ikke være sikre på, at elementet vil have netop denne bredde.