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

Хай некатораму элементу мы задалі шырыню 100px. У CSS гэта ніяк не азначае, што элемент сапраўды будзе шырынёй у 100px. Рэч у тым, што даданне padding пашырае элемент і ён становіцца большым, чым указана ў уласцівасці width.

Давайце паглядзім на прыкладзе. Зробім два блокі, якім зададзім шырыню 100 пікселяў. Пры гэтым другому блоку зададзім padding, а першаму - не. У выніку другі блок будзе большым на памер водступу:

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

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

#elem2 {
	padding: 25px; /* задаем водступы */
	width: 100px;
	height: 100px;
	background: #f1f1f1;
}