Utvidelse av elementer i CSS for JavaScript

Å sette CSS-egenskapene width og height garanterer ikke at elementet får den angitte størrelsen. La oss se på eksempler.

Eksempel

Nå samsvarer elementets dimensjoner med de angitte:

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

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

Результат:

Eksempel

Og la oss nå sette egenskapen padding på elementet. Som et resultat blir den faktiske bredden på elementet større og utvides med den angitte verdien for indre marg:

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

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

Результат:

Eksempel

Tilstedeværelsen av en kant utvider også elementet:

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

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

Результат:

Eksempel

Egenskapen box-sizing tillater å endre beskrevet atferd. Du kan gjøre det slik at verken innvendig marg eller kant utvider elementet. For å gjøre dette må denne egenskapen tildeles verdien 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;
}

Результат:

Viktigheten av det beskrevne

Fra et JavaScript-perspektiv er den beskrevne situasjonen ikke veldig praktisk. Tross alt, det viser seg at ved å lese verdien av egenskapen width kan vi overhodet ikke være sikre på at elementet vil ha nettopp denne bredden.