CSS calc() ফাংশন

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() ব্যবহার করতে পারেন আপনি যখন আপনার উপাদানগুলির মধ্যে ব্যবধান যোগ করেন তখন প্যাডিং বা মার্জিন ব্যবহার করার জন্য একটি প্রতিস্থাপন হিসাবে৷