CSS да паддинг (padding)лар билан ишлаш

Бирор элементга кенглик 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;
}