CSS-da padding bilan ishlash

Keling, ba'zi bir elementga 100px width o'rnatamiz. CSS-da bu element aslida eni 100px bo'ladi degani emas. Gap shundaki, padding qo'shish elementni kengaytiradi va u width xususiyatida ko'rsatilganidan kattaroq bo'ladi.

Keling, bir misolni ko'rib chiqaylik. Kengligi 100 piksel bo'lgan ikkita blok yasaymiz. Bunday holda, biz ikkinchi blokga padding beramiz, lekin birinchisiga bermaymiz. Natijada, ikkinchi blok padding xisobiga kattaroq bo'ladi:

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

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

#elem2 {
	padding: 25px; /* padding beramiz */
	width: 100px;
	height: 100px;
	background: #f1f1f1;