CSS calc() ফাংশন আপনাকে লেথ ভ্যালুগুলোর ওপর বেসিক ম্যাথ অপারেশন প্রয়োগ করতে দেয়:
- যোগ
+ - বিয়োগ
- - গুন
* - ভাগ
/
উদাহরণস্বরূপ, মান লইয়ে নিন আপনি একটি এলিমেন্টে 100% পার্সেন্টেজ উইডথ ব্যবহার করতে চান, কিন্তু আপনি সেই এলিমেন্টে মোট 32px প্রস্থ রিজার্ভ রাখতে চান। calc() দিয়ে সেটি কীভাবে করবেন:
div { max-width: calc(100% - 32px); }এখন সেই এলিমেন্টটি যেকোনো কন্টেইনারে বসে, তার 100% প্রস্থ নেবে, 32px বাদে।
ফলাফল:
100% - 32px
এটি খুব কাজে আসে যখনই আপনাকে একসাথে এক্স্যাক্ট পার্সেন্টেজ এবং পিক্সেল অ্যামাউন্ট নিয়ে কাজ করতে হয় UI-তে।
আপনি সহজে এলিমেন্টকে এর কন্টেইনারের মধ্যে সেন্টার অ্যালাইনও করতে পারেন:
div { max-width: calc(100% - 32px); margin-left: auto; margin-right: auto; }ফলাফল:
100% - 32px, সেন্টার অ্যালাইনড
এখন সেন্টার-অ্যালাইনড এলিমেন্টের বাম এবং ডানে ঠিক ১৬px স্পেসিং আছে। আপনি বুঝতে পারছেন, আপনি এই calc()-কে প্যাডিং বা মার্জিনের রিপ্লেসমেন্ট হিসেবে ব্যবহার করতে পারেন যখন আপনি আপনার এলিমেন্টগুলোর মাঝপথে স্পেসিং যোগ করেন।
