CSS में एलिमेंट्स के विस्तार को रद्द करना
आमतौर पर, पिछले पाठों में वर्णित विस्तार हानिकारक होता है
और आप इसे से छुटकारा पाना चाहेंगे। इसके लिए
CSS में box-sizing प्रॉपर्टी है।
यदि आप इसका वैल्यू border-box सेट करते हैं,
तो न तो padding, और न ही बॉर्डर
ब्लॉक का विस्तार करेंगे:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
background: #f1f1f1;
margin-bottom: 20px;
}
#elem2 {
width: 100px;
height: 100px;
background: #f1f1f1;
padding: 25px; /* पैडिंग सेट करें */
border: 10px solid green; /* बॉर्डर सेट करें */
box-sizing: border-box; /* विस्तार को हटाएं */
}
:
वर्णित प्रॉपर्टी box-sizing को
स्वयं आज़माएं।
