Праца з водступамі padding у CSS

Хай некатораму элементу мы задалі шырыню 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;
}

Результат: