ব্যবধান

সিএসএস পডকাস্ট - 013: ব্যবধান

বলুন আপনি তিনটি বাক্সের একটি সংগ্রহ পেয়েছেন, একে অপরের উপরে স্তুপীকৃত এবং আপনি তাদের মধ্যে স্থান চান। সিএসএসে এটি করার জন্য আপনি কত উপায়ে চিন্তা করতে পারেন?

margin সম্পত্তি আপনাকে আপনার যা প্রয়োজন তা দিতে পারে , তবে এটি অতিরিক্ত ব্যবধান যোগ করতে পারে যা আপনি চান না। উদাহরণস্বরূপ, আপনি কিভাবে এই উপাদানগুলির প্রতিটির মধ্যে স্থানটিকে লক্ষ্য করবেন? এই ক্ষেত্রে gap মত কিছু আরো উপযুক্ত হতে পারে. একটি UI এর মধ্যে ব্যবধান সামঞ্জস্য করার অনেক উপায় রয়েছে, প্রতিটির নিজস্ব শক্তি এবং সতর্কতা রয়েছে।

এইচটিএমএল ব্যবধান

এইচটিএমএল নিজেই স্পেস উপাদানগুলির জন্য কিছু পদ্ধতি প্রদান করে। <br> এবং <hr> উপাদানগুলি আপনাকে ব্লকের দিক থেকে উপাদানগুলিকে স্থান দিতে দেয়, যেটি যদি আপনি একটি ল্যাটিন-ভিত্তিক ভাষায় হন, তাহলে উপরের থেকে নীচে।

আপনি যদি একটি <br> উপাদান ব্যবহার করেন তবে এটি একটি লাইন-ব্রেক তৈরি করবে, ঠিক যেমন আপনি একটি ওয়ার্ড প্রসেসরে আপনার এন্টার কী টিপতেন।

<hr> উভয় পাশে স্থান সহ একটি অনুভূমিক রেখা তৈরি করে, যা margin নামে পরিচিত।

এইচটিএমএল উপাদান ব্যবহার করার পাশাপাশি, এইচটিএমএল সত্তা স্থান তৈরি করতে পারে। একটি HTML সত্তা হল অক্ষরের একটি সংরক্ষিত স্ট্রিং যা ব্রাউজার দ্বারা অক্ষর সত্তা দিয়ে প্রতিস্থাপিত হয়। উদাহরণস্বরূপ, আপনি যদি © আপনার HTML ফাইলে, এটি একটি © অক্ষরে রূপান্তরিত হবে।   সত্তা একটি নন-ব্রেকিং স্পেস ক্যারেক্টারে রূপান্তরিত হয়, যা একটি ইনলাইন স্পেস প্রদান করে। যদিও সতর্কতা অবলম্বন করুন, কারণ এই চরিত্রটির অ-ভাঙা দিকটি দুটি উপাদানকে একত্রিত করে, যার ফলে অদ্ভুত আচরণ হতে পারে।

মার্জিন

আপনি যদি একটি উপাদানের বাইরে স্থান যোগ করতে চান, আপনি margin সম্পত্তি ব্যবহার করুন। মার্জিন আপনার উপাদানের চারপাশে একটি কুশন যোগ করার মত। margin প্রপার্টি হল margin-top , margin-right , margin-bottom এবং margin-left এর জন্য সংক্ষেপিত।

margin শর্টহ্যান্ড একটি নির্দিষ্ট ক্রমে বৈশিষ্ট্য প্রয়োগ করে: উপরে, ডান, নীচে এবং বাম। আপনি কষ্টের সাথে এইগুলি মনে রাখতে পারেন: ট্রুবল।

margin শর্টহ্যান্ড এক, দুই বা তিনটি মান দিয়েও ব্যবহার করা যেতে পারে। একটি চতুর্থ মান যোগ করা আপনাকে প্রতিটি পৃথক দিক সেট করতে দেয়। এগুলি নিম্নরূপ প্রয়োগ করা হয়:

• একটি মান সব দিকে প্রয়োগ করা হবে. ( margin: 20px )।
• দুটি মান: প্রথম মানটি উপরের এবং নীচের দিকে প্রয়োগ করা হবে এবং দ্বিতীয় মানটি বাম এবং ডান দিকে প্রয়োগ করা হবে৷ ( margin: 20px 40px )
• তিনটি মান: প্রথম মানটি top , দ্বিতীয় মানটি left এবং right এবং তৃতীয় মানটি bottom । ( margin: 20px 40px 30px )।

মার্জিনকে দৈর্ঘ্য, শতাংশ বা স্বয়ংক্রিয় মান দিয়ে সংজ্ঞায়িত করা যেতে পারে, যেমন 1em বা 20% । আপনি যদি শতাংশ ব্যবহার করেন, তাহলে আপনার উপাদানের ব্লকের প্রস্থের উপর ভিত্তি করে মানটি গণনা করা হবে।

এর মানে হল যে যদি আপনার উপাদানের ব্লকের প্রস্থ 250px হয় এবং আপনার উপাদানটির margin মান 20% থাকে : আপনার উপাদানটির প্রতিটি পাশের 50px এর গণনাকৃত মার্জিন থাকবে।

আপনি মার্জিনের জন্য auto মান ব্যবহার করতে পারেন। একটি সীমাবদ্ধ আকার সহ ব্লক স্তরের উপাদানগুলির জন্য, একটি auto মার্জিন যে দিকে এটি প্রয়োগ করা হয়েছে সেখানে উপলব্ধ স্থান গ্রহণ করবে। একটি ভাল উদাহরণ হল এটি, ফ্লেক্সবক্স মডিউল থেকে, যেখানে আইটেমগুলি একে অপরের থেকে দূরে ঠেলে দেয়।

auto মার্জিনের আরেকটি ভাল উদাহরণ হল একটি অনুভূমিকভাবে কেন্দ্রীভূত মোড়ক যার সর্বোচ্চ প্রস্থ রয়েছে। এই ধরণের মোড়ক প্রায়ই একটি ওয়েবসাইটে একটি সামঞ্জস্যপূর্ণ কেন্দ্র কলাম তৈরি করতে ব্যবহৃত হয়।

.wrapper {
    max-width: 400px;
    margin: 0 auto;
}

এখানে, উপরের এবং নীচের (ব্লক) পাশ থেকে মার্জিন সরানো হয় এবং auto বাম এবং ডান (ইনলাইন) দিকগুলির মধ্যে স্থান ভাগ করে।

নেতিবাচক মার্জিন

নেতিবাচক মান মার্জিনের জন্যও ব্যবহার করা যেতে পারে। সন্নিহিত ভাইবোন উপাদানগুলির মধ্যে স্থান যোগ করার পরিবর্তে, এটি তাদের মধ্যে স্থান কমিয়ে দেবে । এর ফলে ওভারল্যাপিং উপাদান হতে পারে, যদি আপনি একটি ঋণাত্মক মান ঘোষণা করেন যা উপলব্ধ স্থানের চেয়ে বেশি।

মার্জিন পতন

মার্জিন পতন একটি জটিল ধারণা, তবে এটি এমন কিছু যা আপনি ইন্টারফেস তৈরি করার সময় খুব সাধারণভাবে চালাবেন। বলুন আপনার দুটি উপাদান রয়েছে: একটি শিরোনাম এবং একটি অনুচ্ছেদ উভয়েরই উল্লম্ব মার্জিন রয়েছে:

<article>
  <h1>My heading with teal margin</h1>
  <p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>

h1 {
    margin-bottom: 2rem;
}

p {
    margin-top: 3rem;
}

প্রথম নজরে, অনুচ্ছেদটি শিরোনাম থেকে 5em ব্যবধানে থাকবে এই ভেবে আপনাকে ক্ষমা করা হবে, কারণ 2rem এবং 3rem মিলিত গণনা করে 5rem . কারণ উল্লম্ব মার্জিন ধসে পড়ে , যদিও, স্থানটি আসলে 3rem ।

মার্জিন কোল্যাপস পার্শ্ববর্তী পার্শ্বে উল্লম্ব মার্জিন সেট সহ দুটি সংলগ্ন উপাদানের বৃহত্তম মান নির্বাচন করে কাজ করে। h1 এর নিচের অংশটি p এর উপরের অংশের সাথে মিলিত হয়, তাই h1 এর নিচের মার্জিনের সবচেয়ে বড় মান এবং p এর উপরের মার্জিনটি নির্বাচন করা হয়। যদি h1 এর নিচের মার্জিনের 3.5rem থাকে, তাহলে উভয়ের মধ্যে স্পেস হবে 3.5rem কারণ এটি 3rem এর চেয়ে বড়। শুধুমাত্র ব্লক মার্জিন ভেঙে যায়, ইনলাইন (অনুভূমিক) মার্জিন নয়।

মার্জিন পতনও খালি উপাদানগুলির সাথে সাহায্য করে। আপনার যদি এমন একটি অনুচ্ছেদ থাকে যার উপরে এবং নীচের মার্জিন 20px থাকে, তাহলে এটি শুধুমাত্র 20px স্থান তৈরি করবে: 40px নয়। padding সহ যদিও এই উপাদানটির অভ্যন্তরে কিছু যোগ করা হয় তবে এর মার্জিনটি আর নিজের মধ্যে ভেঙে পড়বে না এবং বিষয়বস্তু সহ যেকোনো বাক্স হিসাবে বিবেচিত হবে।

আপনার উপলব্ধি পরীক্ষা করুন

মার্জিন ধসে আপনার জ্ঞান পরীক্ষা করুন

মার্জিন পতন রোধ করা

position: absolute ব্যবহার করে যদি আপনি একটি উপাদানকে একেবারে অবস্থানে রাখেন, তাহলে মার্জিনটি আর ভেঙে পড়বে না। আপনি যদি float সম্পত্তি ব্যবহার করেন তবে মার্জিনটিও ভেঙে যাবে না।

আপনার যদি ব্লক মার্জিন সহ দুটি উপাদানের মধ্যে মার্জিন ছাড়া একটি উপাদান থাকে তবে মার্জিনটিও ভেঙে যাবে না, কারণ ব্লক মার্জিন সহ দুটি উপাদান আর সংলগ্ন ভাইবোন নয়: তারা কেবল ভাইবোন।

লেআউট পাঠে , আপনি শিখেছেন যে ফ্লেক্সবক্স এবং গ্রিড কন্টেইনারগুলি ব্লক কন্টেইনারগুলির সাথে খুব মিল, কিন্তু তাদের শিশু উপাদানগুলিকে খুব আলাদাভাবে পরিচালনা করে। এটি মার্জিন পতনের ক্ষেত্রেও হয়।

যদি আমরা পাঠ থেকে মূল উদাহরণটি গ্রহণ করি এবং কলামের দিকনির্দেশ সহ ফ্লেক্সবক্স প্রয়োগ করি, তাহলে মার্জিনগুলি সংহত হওয়ার পরিবর্তে একত্রিত হয়। এটি লেআউট কাজের সাথে অনুমানযোগ্যতা প্রদান করতে পারে, যার জন্য ফ্লেক্সবক্স এবং গ্রিড পাত্রে ডিজাইন করা হয়েছে।

মার্জিন এবং মার্জিন পতন বোঝা কঠিন হতে পারে, তবে তারা কীভাবে কাজ করে তা বিশদভাবে বোঝা খুব দরকারী, তাই এই বিশদ ব্যাখ্যাকারীকে দৃঢ়ভাবে সুপারিশ করা হয়।

প্যাডিং

আপনার বাক্সের বাইরের অংশে স্থান তৈরি করার পরিবর্তে, যেমন margin করে, padding বৈশিষ্ট্য পরিবর্তে আপনার বাক্সের ভিতরে স্থান তৈরি করে: যেমন অন্তরণ।

আপনি কোন বক্স মডেল ব্যবহার করছেন তার উপর নির্ভর করে—যা বক্স মডেল পাঠে কভার করা হয়েছে — padding উপাদানটির সামগ্রিক মাত্রাকেও প্রভাবিত করতে পারে।

padding বৈশিষ্ট্যটি padding-top , padding-right , padding-bottom এবং padding-left এর জন্য সংক্ষিপ্ত। margin মতোই, padding যৌক্তিক বৈশিষ্ট্য রয়েছে: padding-block-start , padding-inline-end , padding-block-end এবং padding-inline-start ।

পজিশনিং

এছাড়াও লেআউট মডিউলে আচ্ছাদিত, যদি আপনি position জন্য একটি মান সেট করেন যা static ব্যতীত অন্য কিছু, আপনি top , right , bottom এবং left বৈশিষ্ট্য সহ উপাদানগুলিকে স্থান দিতে পারেন। এই দিকনির্দেশক মানগুলি কীভাবে আচরণ করে তার সাথে কিছু পার্থক্য রয়েছে:

• position: relative নথির প্রবাহে তার স্থান বজায় রাখবে, এমনকি আপনি যখন এই মানগুলি সেট করেন। এগুলি আপনার উপাদানের অবস্থানের সাথেও আপেক্ষিক হবে।
• position: absolute আপেক্ষিক পিতামাতার অবস্থান থেকে দিকনির্দেশক মানকে ভিত্তি করবে।
• position: fixed ভিউপোর্টের দিকনির্দেশক মানকে ভিত্তি করবে।
• position: sticky শুধুমাত্র নির্দেশমূলক মান প্রয়োগ করবে যখন এটি ডক করা/আটকে থাকা অবস্থায় থাকে।

যৌক্তিক বৈশিষ্ট্য মডিউলে, আপনি inset-block এবং inset-inline বৈশিষ্ট্য সম্পর্কে শিখবেন, যা আপনাকে নির্দেশমূলক মান সেট করতে দেয় যা লেখার মোডকে সম্মান করে।

উভয় বৈশিষ্ট্যই start এবং end মানগুলির সংমিশ্রণে সংক্ষিপ্ত আকারের এবং এইভাবে start এবং end জন্য সেট করা একটি মান বা দুটি পৃথক মান গ্রহণ করে।

গ্রিড এবং ফ্লেক্সবক্স

অবশেষে, গ্রিড এবং ফ্লেক্সবক্স উভয় ক্ষেত্রেই আপনি শিশু উপাদানগুলির মধ্যে স্থান তৈরি করতে gap সম্পত্তি ব্যবহার করতে পারেন। gap বৈশিষ্ট্যটি row-gap এবং column-gap সংক্ষিপ্ত বিবরণ, এটি এক বা দুটি মান গ্রহণ করে, যা দৈর্ঘ্য বা শতাংশ হতে পারে। এছাড়াও আপনি unset , initial এবং inherit এর মত কীওয়ার্ড ব্যবহার করতে পারেন। আপনি যদি শুধুমাত্র একটি মান সংজ্ঞায়িত করেন, একই gap সারি এবং কলাম উভয় ক্ষেত্রেই প্রয়োগ করা হবে, কিন্তু যদি আপনি উভয় মান সংজ্ঞায়িত করেন, প্রথম মানটি row-gap এবং দ্বিতীয় মানটি column-gap ।

ফ্লেক্সবক্স এবং গ্রিড উভয়ের সাথে, আপনি তাদের বিতরণ এবং প্রান্তিককরণ ক্ষমতা ব্যবহার করে স্থান তৈরি করতে পারেন, যা আমরা গ্রিড মডিউল এবং ফ্লেক্সবক্স মডিউলে কভার করি।

সামঞ্জস্যপূর্ণ ব্যবধান তৈরি করা

একটি কৌশল বেছে নেওয়া এবং এটির সাথে লেগে থাকা আপনাকে একটি সামঞ্জস্যপূর্ণ ইউজার ইন্টারফেস তৈরি করতে সাহায্য করার জন্য যা ভাল প্রবাহ এবং ছন্দ রয়েছে তা সত্যিই একটি ভাল ধারণা৷ এটি অর্জন করার একটি ভাল উপায় হল আপনার ব্যবধানের জন্য সামঞ্জস্যপূর্ণ ব্যবস্থা ব্যবহার করা।

উদাহরণ স্বরূপ, আপনি 20px ব্যবহার করতে প্রতিশ্রুতিবদ্ধ হতে পারেন উপাদানগুলির মধ্যে সমস্ত ফাঁকের জন্য একটি সামঞ্জস্যপূর্ণ পরিমাপ - যা গাটার নামে পরিচিত - যাতে সমস্ত লেআউটগুলি সামঞ্জস্যপূর্ণ দেখায় এবং অনুভব করে৷ আপনি প্রবাহ বিষয়বস্তুর মধ্যে উল্লম্ব ব্যবধান হিসাবে 1em ব্যবহার করার সিদ্ধান্ত নিতে পারেন, যা উপাদানের font-size উপর ভিত্তি করে সামঞ্জস্যপূর্ণ ব্যবধান অর্জন করবে। আপনি যাই চয়ন করুন না কেন, আপনার এই মানগুলিকে ভেরিয়েবল (বা CSS কাস্টম বৈশিষ্ট্য) হিসাবে সংরক্ষণ করা উচিত যাতে সেই মানগুলিকে টোকেনাইজ করা যায় এবং সামঞ্জস্যকে কিছুটা সহজ করা যায়।

:root {
  --gutter: 20px;
  --spacing: 1em;
}

h1 {
  margin-left: var(--gutter);
  margin-top: var(--spacing);
}

এর মতো কাস্টম বৈশিষ্ট্যগুলি ব্যবহার করলে আপনি সেগুলিকে একবার সংজ্ঞায়িত করতে পারবেন, তারপরে আপনার CSS জুড়ে সেগুলি ব্যবহার করুন৷ যখন তারা আপডেট করা হয়, স্থানীয়ভাবে একটি উপাদানের মধ্যে বা বিশ্বব্যাপী, মানগুলি ক্যাসকেডের মধ্য দিয়ে চলে যাবে এবং আপডেট করা মানগুলি প্রতিফলিত হবে।

আপনার উপলব্ধি পরীক্ষা করুন

ব্যবধান সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন