CSS-da padding chet joylar bilan ishlash

Faraz qilaylik, biz biron bir elementga kenglik 100px berdik. CSS-da bu hech qanday tarzda elementning haqiqiy kengligi 100px bo'lishini anglatmaydi. Gap shundaki, padding qo'shish elementni kengaytiradi va u width xususiyatida ko'rsatilganidan ko'ra kattaroq bo'ladi.

Keling, bir misolni ko'rib chiqaylik. Keling, ikkita blok yarataylik, ularga kengligi 100 piksel deb belgilaymiz. Shu bilan birga, ikkinchi blokga padding beramiz, birinchisiga - bermaymiz. Natijada ikkinchi blok chet joyi o'lchamiga qarab kattaroq bo'ladi:

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

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

#elem2 {
	padding: 25px; /* chet joylarini belgilaymiz */
	width: 100px;
	height: 100px;
	background: #f1f1f1;
}