CSS-এ স্বয়ংক্রিয় প্রস্থ ব্লক সহ টাইলগুলিতে ইন্ডেন্টেশন

ধরুন আমাদের একটি টাইল আছে যাতে একসাথে চারটি ব্লক রয়েছে:

css.child {
  width: 25%;
}

আসুন আমাদের ব্লকগুলিকে অনুভূমিক এবং উল্লম্বভাবে শতাংশে মার্জিন যোগ করি:

css.child {
  margin-right: 1.5%;
  margin-bottom: 1.5%;
}
.child:nth-child(4n) {
  margin-right: 0;
}

যতক্ষণ না আমরা যা করেছি তা সঠিকভাবে কাজ করবে না, কারণ ব্লক এবং মার্জিনের মোট প্রস্থ 100%-এর বেশি। সঠিকভাবে কাজ করার জন্য আমাদের প্রতিটি ব্লক থেকে একটি নির্দিষ্ট অংশ কেটে নিতে হবে, যাতে আমাদের মার্জিনের জন্য জায়গা থাকে। আসুন এই অংশগুলি গণনা করি।

আমাদের ক্ষেত্রে দেখা যাচ্ছে যে চারটি ব্লক আছে, এবং তাদের মধ্যে তিনটি মার্জিন আছে - প্রতিটি দেড় শতাংশ। বিয়োগযোগ্য অংশ গণনা করতে, আপনার মোট মার্জিনকে ব্লকের সংখ্যা দিয়ে ভাগ করতে হবে:

1.5% * 3 / 4 = 1.125

তাহলে প্রতিটি ব্লকের প্রস্থ সমান হবে:

25% - 1.5% * 3 / 4 = 23.875%

নিম্নলিখিত কোডটি পাওয়া যাবে:

css.child {
  width: 23.875%;
  margin-right: 1.5%;
  margin-bottom: 1.5%;
}
.child:nth-child(4n) {
  margin-right: 0;
}

আপনি নিজে থেকে এই মার্জিন গণনা না করে, গণনার কাজটি calc ফাংশনের উপর ছেড়ে দিতে পারেন:

css.child {
  width: calc(25% - 1.5% * 3 / 4);
  margin-right: 1.5%;
  margin-bottom: 1.5%;
}
.child:nth-child(4n) {
  margin-right: 0;
}

ব্লকের প্রস্থকেও calc ফাংশন দিয়ে গণনা করতে দিন:

css.child {
  width: calc(100% / 4 - 1.5% * 3 / 4);
  margin-right: 1.5%;
  margin-bottom: 1.5%;
}
.child:nth-child(4n) {
  margin-right: 0;
}

Задание 1

ব্লকগুলিকে শতাংশে প্রস্থ নির্ধারণ করুন যাতে টাইলে একটি সারিতে তিনটি ব্লক থাকে এবং তাদের মধ্যে দূরত্ব হয় 3%।

Задание 2

ব্লকগুলিকে শতাংশে প্রস্থ নির্ধারণ করুন যাতে টাইলে একটি সারিতে ছয়টি ব্লক থাকে এবং তাদের মধ্যে দূরত্ব হয় 0.5%।

Задание 3

ব্লকগুলিকে শতাংশে প্রস্থ নির্ধারণ করুন যাতে টাইলে একটি সারিতে চারটি ব্লক থাকে এবং ব্লকগুলির মধ্যে দূরত্ব হয় 30px।

Задание 4

ব্লকগুলিকে শতাংশে প্রস্থ নির্ধারণ করুন যাতে টাইলে একটি সারিতে পাঁচটি ব্লক থাকে এবং ব্লকগুলির মধ্যে দূরত্ব হয় 50px।