Estensione degli elementi in CSS per JavaScript

Impostare le proprietà CSS width e height non garantisce che l'elemento assuma le dimensioni specificate. Diamo un'occhiata agli esempi.

Esempio

Attualmente le dimensioni dell'elemento coincidono con quelle impostate:

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

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

Результат:

Esempio

E ora impostiamo all'elemento la proprietà padding. Di conseguenza, la larghezza reale dell'elemento diventerà maggiore e si espanderà del valore impostato per il margine interno:

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

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

Результат:

Esempio

Anche la presenza del bordo espande l'elemento:

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

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

Результат:

Esempio

La proprietà box-sizing permette di modificare il comportamento descritto sopra. È possibile fare in modo che né il margine interno, né il bordo espandano l'elemento. Per farlo, è necessario assegnare a questa proprietà il valore 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;
}

Результат:

Importanza di quanto descritto

Dal punto di vista di JavaScript, la situazione descritta non è molto conveniente. Dopo tutto, risulta che leggendo il valore della proprietà width non possiamo affatto essere sicuri che l'elemento avrà proprio quella larghezza.