বক্স মডেল: CSS বাহ্যিক মার্গিন

ইলেকট্রনিকের পাশের বাইরের খালি এলাকা হল বাহ্যিক মার্গিন। বাহ্যিক মার্গিন নির্ধারণ করলে, ইলেকট্রনিকের বাইরে অতিরিক্ত 'খালি জায়গা' তৈরি হয়。

বাহ্যিক মার্গিন নির্ধারণকরার সবচেয়ে সহজ পদ্ধতি হল margin প্রতিভাগী, যা কোনও দৈর্ঘ্য ইউনিট, শতপ্রতিশত মান বা নেতিবাচক মান স্বীকার করে。

CSS margin অ্যাট্রিবিউট

বাহ্যিক মার্গিন নির্ধারণকরার সবচেয়ে সহজ পদ্ধতি হল মার্গিন প্রতিভাগী。

মার্গিন প্রতিভাগী কোনও দৈর্ঘ্য ইউনিট স্বীকার করে, যেমন পিক্সেল, ইঞ্চ, মিলিমিটার বা em。

মার্গিন-এর সম্পূর্ণ মান হতে পারে auto, সাধারণত বাহ্যিক মার্গিনের দৈর্ঘ্য মান নির্ধারণ করা হয়। নিচের ঘোষণা h1 ইলেকট্রনিকের সবকটি পাশে 1/4 ইঞ্চ প্রশস্ত খালি জায়গা নির্ধারণ করে:

h1 {মার্গিন : 0.25ইঞ্চ;}

এই উদাহরণটি h1 ইলেকট্রনিকের চারটি পাশের মধ্যে ভিন্ন বাহ্যিক মার্গিন নির্ধারণ করে, ব্যবহৃত দৈর্ঘ্য ইউনিট হল পিক্সেল (পিক্সেল):

h1 {মার্গিন : 10পিক্সেল 0পিক্সেল 15পিক্সেল 5পিক্সেল;}

অভ্যন্তরীণ মার্গিনের নিয়ন্ত্রণের মতো, এই মানগুলোর ক্রমবিন্যাস উপরের মার্গিন (top) থেকে প্রবাহিত হয়, প্রতিরক্ষা প্রবাহিত হয়:

মার্গিন: top right bottom left

এছাড়া, মার্গিনকে একটি শতাংশ মান নির্দিষ্ট করা যেতে পারে:

p {মার্গিন: ১০%;}

শতাংশ পিতৃতুল্য হয়, যা পিতৃতুল্য এলিমেন্টের width অনুযায়ী গণনা করা হয়।এই উদাহরণটি p এলিমেন্টের জন্য মার্গিন পিতৃতুল্যের width-এর ১০% হবে。

মার্গিনের ডিফল্ট মান ০ হয়, যদি মার্গিন জন্য কোনও মান নির্দিষ্ট করা হয় না, তবে মার্গিন প্রকাশ করা হবে না।কিন্তু, কার্যক্রমে, ব্রাউজার অনেক সাধারণ এলিমেন্টের জন্য প্রতিষ্ঠিত স্টাইলগুলো প্রদান করে, মার্গিনও তার মধ্যে।যেমন, CSS সমর্থক ব্রাউজারে, প্যারাগ্রাফ এলিমেন্টের উপর ও নিচে 'খালি লাইন' তৈরি করে।তাই, p এলিমেন্টের জন্য মার্গিন নির্দিষ্ট করা হয়নি, তবে ব্রাউজার স্বয়ং মার্গিন লাগাতে পারে।তবে, যদি আপনি বিশেষভাবে ঘোষণা করেন, তবে ডিফল্ট স্টাইলকে সমাপ্ত করা যাবে。

মান কপি

মনে পড়েন? আমরা আগের দুই অধ্যায়ে মান কপি করের বিষয়ে উল্লেখ করেছিলাম।এখন আমরা মান কপি করে কিভাবে ব্যবহার করা যায়, তা ব্যাখ্যা করব।

কখনও কখনও, আমরা কিছু পুনরাবৃত্ত মান লিখতে পারি:

p {মার্গিন: ০.৫ইম ১ইম ০.৫ইম ১ইম;}

মান কপি করে, আপনি এই দুটি সংখ্যাটি পুনরাবৃত্তিহীনভাবে লিখতে হবে।এই নিয়মটি নিচের নিয়মটির সমতুল্য:

p {মার্গিন: ০.৫ইম ১ইম;}

এই দুটি মানগুলো আগের ৪টি মানগুলোকে প্রতিস্থাপন করতে পারে।কিভাবে এটা করা যায়? CSS একটি নিয়ম নির্দিষ্ট করে, যা মার্গিনের জন্য কমই ৪টি মান নির্দিষ্ট করাকে অনুমতি দেয়।নিয়মটি এইভাবে:

  • যদি ডান মার্গিনের মান অপসারিত হয়, তবে ডান মার্গিনের মান ব্যবহার করা হবে。
  • যদি নিচের মার্গিনের মান অপসারিত হয়, তবে উপরের মার্গিনের মান ব্যবহার করা হবে。
  • যদি ডান মার্গিনের মান অপসারিত হয়, তবে উপরের মার্গিনের মান ব্যবহার করা হবে。

এই চিত্রটি এই বিষয়টি আরও স্পষ্টভাবে বুঝতে সাহায্য করে:

CSS মান কপি

অর্থাৎ, যদি মার্গিনের জন্য ৩টি মান নির্দিষ্ট করা হয়, তবে চতুর্থটি মান (ডান মার্গিন) দ্বিতীয়টি মান (ডান মার্গিন) থেকে কপি করা হবে।যদি দুটি মান দেওয়া হয়, তবে চতুর্থটি মান দ্বিতীয়টি মান থেকে কপি করা হবে, তৃতীয়টি মান (নিচের মার্গিন) প্রথমটি মান (উপরের মার্গিন) থেকে কপি করা হবে।শেষ ক্ষেত্রে, যদি কেবল একটি মান দেওয়া হয়, তবে অন্য তিনটি মার্গিনগুলোও এই মান (উপরের মার্গিন) থেকে কপি করা হবে。

এই সহজ পদ্ধতিটি ব্যবহার করে, আপনি কেবল প্রয়োজনীয় মানগুলো নির্দিষ্ট করতে হবে, না সবগুলো মানগুলো লাগাতে হবে, যেমন:

h1 {মার্গিন: ০.২৫ইম ১ইম ০.৫ইম;}	/* সমান ০.২৫ইম ১ইম ০.৫ইম ১ইম */
h2 {মার্গিন: ০.৫ইম; ১ইম;}		/* সমান ০.৫ইম ১ইম ০.৫ইম ১ইম */
p {margin: 1px;}			/* সমান 1px 1px 1px 1px */

এই পদ্ধতিটির একটি ছোট দিক হল, আপনি শেষতে এই সমস্যাটি এসে পড়বেন। যেমন, আপনি চান p বস্তুর উপরের মার্গ এবং ডানদিকের মার্গকে 20 পিক্সেল হিসাবে সেট করতে চান, এবং নিচের মার্গ এবং ডানদিকের মার্গকে 30 পিক্সেল হিসাবে সেট করতে চান, এই ক্ষেত্রে, নিচের পদ্ধতিতে লিখতে হবে:

p {margin: 20px 30px 30px 20px;}

এইভাবেই আপনি চান প্রভাব পাবেন। দুঃখের বিষয়, এই ক্ষেত্রে, প্রয়োজনীয় মানগুলির সংখ্যা কমানো যায়নি。

আরও একটি উদাহরণ দেখুন। যদি শুধুমাত্র ডানদিকের মার্গ ছাড়া অন্যান্য সকল মার্গ auto (ডানদিকের মার্গ 20px) হয়ে থাকে, তবে:

p {margin: auto auto auto 20px;}

একইভাবে, এইভাবেই আপনি চান প্রভাব পাবেন। প্রশ্ন হল, auto করতে হবের জন্য এইভাবে একটি কোডটি লেখা খুবই সমস্যাজনক। আপনি কেবল একটি বস্তুর একদিকের মার্গ প্যাডিং নিয়ন্ত্রণ করতে চান, তবে একদিকের মার্গ প্যাডিং অ্যাট্রিবিউট ব্যবহার করুন。

একদিকের মার্গ প্যাডিং অ্যাট্রিবিউট

আপনি একদিকের মার্গ প্যাডিং অ্যাট্রিবিউট ব্যবহার করে একটি বস্তুর একদিকের মার্গ প্যাডিং সেট করতে পারেন। যেমন, আপনি চান p বস্তুর ডানদিকের মার্গ প্যাডিংকে 20px হিসাবে সেট করতে চান, margin (যা auto করতে হবে) ব্যবহার করতে হবেন না, এবং নিচের পদ্ধতিকে ব্যবহার করতে পারেন:

p {margin-left: 20px;}

আপনি যে কোনও একটি প্রতিশ্রুতিকে শুধুমাত্র উপরের মার্গ সেট করতে চান, তাহলে এই প্রতিশ্রুতিকে ব্যবহার করতে পারেন:

একটি নিয়মে এই ধরনের বেশ কয়েকটি একদিকের অ্যাট্রিবিউট ব্যবহার করা যেতে পারে, যেমন:

h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  }

তারপরও, এই ধরনের ক্ষেত্রে, margin ব্যবহার করা সহজতর হবে:

p {margin: 20px 30px 30px 20px;}

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

সুচনা এবং মন্তব্য

সুচনা:নেটস্কেপ এবং IE বডি ট্যাগকে পরিভাষিত মার্গ (মার্গিন) মান 8px। কিন্তু ওপেরা এমনটা নয়। এর পরিবর্তে, ওপেরা ইনসিডিং প্যাডিং (প্যাডিং) মান 8px হিসাবে পরিভাষিত করে। তাই, যদি সমগ্র ওয়েবসাইটের মার্গগুলিকে পরিবর্তন করে ওপেরাতে সঠিকভাবে প্রদর্শিত করতে চান, তবে বডির প্যাডিংকে কাস্টমাইজ করতে হবে。

CSS মার্গ ইনস্ট্যান্স:

লেখার ডানদিকের বাহ্যিক মার্গ সেট করুন
এই উদাহরণ দেখিয়েছে কিভাবে লেখার বামদিক মার্গিন সেট করা যায়。
লেখার ডানদিক মার্গিন সেট করুন
এই উদাহরণ দেখিয়েছে কিভাবে লেখার ডানদিক মার্গিন সেট করা যায়。
লেখার উপর মার্গিন সেট করুন
এই উদাহরণ দেখিয়েছে কিভাবে লেখার উপর মার্গিন সেট করা যায়。
লেখার নিচদিক মার্গিন সেট করুন
এই উদাহরণ দেখিয়েছে কিভাবে লেখার নিচদিক মার্গিন সেট করা যায়。
সমস্ত মার্গিন অ্যাট্রিবিউট একটি বিবৃতিতে।
এই উদাহরণ দেখিয়েছে কিভাবে সমস্ত মার্গিন অ্যাট্রিবিউটকে একটি বিবৃতিতে সেট করা যায়。

CSS মার্গিন অ্যাট্রিবিউট

অ্যাট্রিবিউট বর্ণনা
margin সংক্ষিপ্ত অ্যাট্রিবিউট। একটি বিবৃতিতে সমস্ত মার্গিন অ্যাট্রিবিউট সেট করুন。
margin-bottom এলিমেন্টের নিচদিক মার্গিন সেট করুন。
margin-left এলিমেন্টের বামদিক মার্গিন সেট করুন。
margin-right এলিমেন্টের ডানদিক মার্গিন সেট করুন。
margin-top এলিমেন্টের উপর অপরিমাণ মার্গিন সেট করুন。