সিএসএস মার্জিন - Css Margin



কোন এলিমেন্টের চারপাশের ফাকা স্থান নির্ধারণ করাই হল সিএসএস মার্জিন ব্যবহারের উদ্দেশ্য।


সিএসএস মার্জিন

কোন এলিমেনট বর্ডারের চারপাশের ফাকা স্থান নির্দিষ্ট করে দেয়া হয় সিএসএস মার্জিন প্রপার্টি ব্যবহার করে। মার্জিনের কোন ব্যাকগ্রাউন্ড কালার নেই, এটা পুরোপুরি transparent অর্থাৎ অদৃশ্য।

ভিন্ন ভিন্ন মার্জিন প্রপার্টি ব্যবহার করে, স্বাধীনভাবে top, right, bottom এবং left মার্জিন নির্দিষ্ট করে দেয়া যায়। আবার শর্টহ্যান্ড প্রপার্টির মাধ্যমে একবার মাত্র margin প্রপার্টি ব্যবহার করেও সবগুলো মার্জিন নির্দিষ্ট করে দেয়া যায়।


মার্জিন মান

বিভিন্ন ভাবে মার্জিন নির্দিষ্ট করা যায়, যেমন - নির্দিষ্ট বা fixed মান ব্যবহার করে কিংবা শতকরা পদ্ধতিতে বা স্বয়ংক্রিয় ভাবে।

মান বর্ণনা
auto ব্রাউজার মার্জিন নির্ধারণ করে। এতে ব্রাউজারের উপরেই ফলাফল নির্ভর করে।
length নির্দিষ্ট মানের(pixel, pt, em ইত্যাদিতে) মার্জিন নির্ধারণ করে।
% ধারনক্রিত এলিমেনটের শতকরা হারের ওপর মার্জিন নির্ধারণ করে।

নোট - কন্টেন্ট overlap করার জন্য negetive (-) মানও ব্যবহার করা যায়।


বিভিন্ন মানের মার্জিন

সিএসএস ব্যবহার করে কোন কন্টেন্ট যেমন- image, table, text ইত্যাদির চারদিকে বিভিন্ন মানের মার্জিন নির্দিষ্ট করে দেয়া যায়।

কোড দেখুন

margin-top:40px;
margin-bottom:60px;
margin-right:80px;
margin-left:100px;




শর্টহ্যান্ড প্রপার্টি

কোড সংক্ষিপ্ত করে লেখার জন্য, সবগুলো মার্জিন প্রপার্টি একটি মাত্র সিএসএস মার্জিন প্রপার্টির মাধ্যমে প্রকাশ করা যায়। অর্থাৎ top, bottom, left ও right এর জন্য আলাদা আলাদা ভাবে মার্জিন নির্দিষ্ট না করে একবার মাত্র মার্জিন প্রপার্টি ব্যবহার করেই চারদিকে চার রকম মানের মার্জিন নির্দিষ্ট করে দেয়া যায়। একে বলে শর্টহ্যান্ড প্রপার্টি।

৪টি উপায়ে সিএসএস শর্টহ্যান্ড মার্জিন প্রপার্টি ব্যবহার করা যায়। নীচে এগুলোর বর্ণনা দেয়া হল -

১ম পদ্ধতি -

উদাহরণ

margin:20px;


এভাবে কোড লিখলে এলিমেনটের চারপাশেই অর্থাৎ left, right, top এবং bottom এ 20px মার্জিন তৈরি হবে।

২য় পদ্ধতি -

কোড দেখুন

margin:20px 30px;


এভাবে কোড লেখার ফলে প্রথম valu এর জন্য top ও bottom এ 20px এবং দ্বিতীয় valu এর জন্য left ও right এ 30px এর মার্জিন তৈরি হবে।

৩য় পদ্ধতি -

কোড দেখুন

margin:20px 30px 40px;


এভাবে কোড লেখার ফলে প্রথম valu এর জন্য top এ 20px, দ্বিতীয় valu এর জন্য left ও right এ 30px এবং ৩য় valu এর জন্য bottom এ 40px এর মার্জিন তৈরি হবে।

৪থ পদ্ধতি -

উদাহরণ

margin:20px 30px 40px 50px;


এভাবে কোড লেখার ফলে প্রথম valu এর জন্য top এ 20px, দ্বিতীয় valu এর জন্য right এ 30px, ৩য় valu এর জন্য bottom এ 40px এবং left এ 50px এর মার্জিন তৈরি হবে।


সবগুলো মার্জিন প্রপার্টি

প্রপার্টি বর্ণনা
margin একটি মাত্র ডিক্লারেসনের দ্বারা সকল margin প্রপার্টির মান নির্ধারণ করে।
margin-bottom কোন এলিমেনটের bottom margin নির্ধারণ করে।
margin-left কোন এলিমেনটের left margin নির্ধারণ করে।
margin-right কোন এলিমেনটের right margin নির্ধারণ করে।
margin-top কোন এলিমেনটের top margin নির্ধারণ করে।






এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.