Elemek bővítése CSS-ben JavaScript szempontjából

A width és height CSS tulajdonságok beállítása nem garantálja, hogy az elem a megadott méretű lesz. Nézzük meg példákon.

Példa

Most az elem méretei megegyeznek a megadottakkal:

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

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

Результат:

Példa

Most pedig állítsuk be az elemnek a padding tulajdonságot. Ennek eredményeképpen az elem valódi szélessége megnő és kiterjed a megadott belső margó értékére:

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

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

Результат:

Példa

A szegély jelenléte szintén kiterjeszti az elemet:

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

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

Результат:

Példa

A box-sizing tulajdonság lehetővé teszi a fenti viselkedés módosítását. Megtehetjük, hogy sem a belső margó, sem a szegély ne bővítse ki az elemet. Ehhez a tulajdonságnak a border-box értéket kell adni:

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

Результат:

A leírtak fontossága

JavaScript szempontjából a leírt helyzet nem túl kényelmes. Hiszen kiderül, hogy a width tulajdonság értékének elolvasása után egyáltalán nem lehetünk biztosak abban, hogy az elem éppen ezen a szélességen lesz.