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