CSS-de padding goşantylary bilen işlemek

Belli bir element üçin giňligini 100px dep belleýeliň. CSS-de bu, esasan, elementiň hakykatdanam 100px giňlikde boljakdygyny aňladýar däl. Sebäbi padding goşmak elementi giňeldýär we ol width häsiýetinde görkezilenden has uly bolýar.

Mysal üçin seredeliň. Iki blok düzeliň, olara 100 piksel giňlik bereliň. Şol bir wagtynda ikinji bloka padding bereliň, birinjisine - ýok. Netijede ikinji blok goşanty möçberinde has uly bolýar:

html<div id="elem1"></div>
<div id="elem2"></div>

css#elem1 {
  width: 100px;
  height: 100px;
  background: #f1f1f1;
  margin-bottom: 20px;
}

#elem2 {
  padding: 25px; /* goşantylary bellemek */
  width: 100px;
  height: 100px;
  background: #f1f1f1;
}

Результат: