सीएसएस में पैडिंग के साथ काम करना

मान लीजिए कि हमने किसी तत्व की चौड़ाई 100px निर्धारित की है। सीएसएस में इसका मतलब यह बिल्कुल नहीं है कि तत्व वास्तव में 100px चौड़ा होगा। बात यह है कि padding जोड़ने से तत्व का विस्तार होता है और वह width गुण में निर्दिष्ट मान से बड़ा हो जाता है।

आइए एक उदाहरण देखें। आइए दो ब्लॉक बनाएं जिनकी चौड़ाई 100 पिक्सेल निर्धारित करें। साथ ही दूसरे ब्लॉक को padding दें, और पहले को - नहीं। परिणामस्वरूप दूसरा ब्लॉक पैडिंग के आकार से बड़ा होगा:

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

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

#elem2 {
  padding: 25px; /* पैडिंग दें */
  width: 100px;
  height: 100px;
  background: #f1f1f1;
}

Результат: