Darbas su atitraukimais padding CSS

Tarkime, kad tam tikram elementui nustatėme plotį 100px. CSS tai visiškai nereiškia, kad elemento plotis iš tikrųjų bus 100px. Esmė ta, kad pridėjus padding elementas išsiplėčia ir tampa didesnis nei nurodyta width savybėje.

Pažiūrėkime pavyzdį. Sukurkime du blokus, kuriems nustatysime plotį 100 pikselių. Tuo tarpu antrajam blokui nustatysime padding, o pirmajam - ne. Dėl to antrasis blokas bus didesnis už nurodytą atstumą:

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

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

#elem2 {
  padding: 25px; /* nustatome atitraukimus */
  width: 100px;
  height: 100px;
  background: #f1f1f1;
}

Результат: