CSS calc() फंक्शन आपको लंबाई वैल्यूज पर बेसिक मैथ ऑपरेशंस लागू करने की अनुमति देता है:
- जोड़
+ - घटाव
- - गुणा
* - भाग
/
उदाहरण के लिए मान लें कि आप किसी एलिमेंट पर 100% की प्रतिशत चौड़ाई का उपयोग करना चाहते हैं, लेकिन आप उसी एलिमेंट पर कुल 32px चौड़ाई आरक्षित करना चाहते हैं। यहाँ calc() के साथ ऐसा कैसे करें:
div { max-width: calc(100% - 32px); }अब वह एलिमेंट अपने कंटेनर के अंदर जो भी हो उसका 100% ले लेगा, घटा 32px।
परिणाम:
यह तब उपयोगी होता है जब आपको एक ही समय में UI पर सटीक प्रतिशत और पिक्सेल मात्रा के साथ काम करने की आवश्यकता होती है।
आप एलिमेंट को उसके कंटेनर के अंदर आसानी से सेंटर-अलाइन भी कर सकते हैं:
div { max-width: calc(100% - 32px); margin-left: auto; margin-right: auto; }परिणाम:
अब सेंटर-अलाइन्ड एलिमेंट के बाएं और दाएं बिल्कुल 16px स्पेसिंग है। जैसा कि आप बता सकते हैं, जब आप अपने एलिमेंट्स के बीच स्पेसिंग जोड़ते हैं तो आप calc() का उपयोग पैडिंग या मार्जिन के प्रतिस्थापन के रूप में कर सकते हैं।
