CSS'те padding таңгактары менен иштөө

Бир элементке туурасын 100px кылдык деп коёлу. CSS'те бул элемент чынында эле 100px туура болот дегенди билдирбейт. Анткени padding кошуу элементти кеңейтип, ал width касиетинде көрсөтүлгөндөн чоңураак кылат.

Келгиле, мисал менен карап көрөлү. Эки блок түзөлү, аларга туурасын 100 пиксель кылалы. Бир эле учурда экинчи блокко padding коёлу, биринчисине кошбойлы. Натыйжада экинчи блок таңгак өлчөмүнө көбөйөт:

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

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

#elem2 {
  padding: 25px; /* таңгактарды белгилейбиз */
  width: 100px;
  height: 100px;
  background: #f1f1f1;
}

Результат: