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;
}