सीएसएस कैल्क () फ़ंक्शन

सीएसएस calc() फ़ंक्शन आपको लंबाई मानों पर बुनियादी गणित संचालन लागू करने की अनुमति देता है:

+जोड़ें
घटाना -
गुणा *
डिवीजन /

उदाहरण के लिए मान लें कि आप किसी तत्व पर 100% की चौड़ाई का प्रतिशत उपयोग करना चाहते हैं, लेकिन आप उसी तत्व पर कुल 32px चौड़ाई आरक्षित करना चाहते हैं। calc() के साथ ऐसा करने का तरीका यहां बताया गया है :

div {
	max-width: calc(100% - 32px);
}

अब वह तत्व जो भी कंटेनर अंदर बैठता है उसका 100% हिस्सा ले लेगा, माइनस 32पीएक्स।

परिणाम:

100% - 32पीएक्स

यह तब उपयोगी होता है जब आपको UI पर एक ही समय में सटीक प्रतिशत और पिक्सेल मात्रा के साथ काम करने की आवश्यकता होती है।

आप तत्व को उसके कंटेनर के अंदर आसानी से मध्य संरेखित भी कर सकते हैं:

div {
	max-width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
}

परिणाम:

100% - 32px, मध्य संरेखित

अब केंद्र-संरेखित तत्व में बाईं और दाईं ओर 16px की दूरी है। जैसा कि आप बता सकते हैं, आप इस calc() . का उपयोग कर सकते हैं जब आप अपने तत्वों के बीच रिक्ति जोड़ते हैं तो पैडिंग या मार्जिन का उपयोग करने के लिए प्रतिस्थापन के रूप में।