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

কোন এইচটিএমএল এলিমেন্টের চারপাশের ফাকা স্থান নির্ধারণ করাই হল সিএসএস মার্জিন ব্যবহারের উদ্দেশ্য। এক কথায় আমরা লেখাপড়া করার সময় খাতার দুই বা চার পাশে যে, ফাঁকা স্থান বাদ রেখে লেখা শুরু করতাম, সেটাই হল মার্জিন।

এটি একটি 30px এর মার্জিন।

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

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

ভিন্ন ভিন্ন মার্জিন প্রপার্টি ব্যবহার করে, স্বাধীনভাবে কোন এইচটিএমএল এলিমেন্ট এর চতুর্দিকে মার্জিন নির্ধারণ করা যায়। margin-left, margin-right, margin-top এবং margin-bordar.

সকল মার্জিন প্রোপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।

p {
   margin-left: 40px;
   margin-righ: 60px;
   margin-top: 80px;
   margin-bordar: 100px;
  }

কোড এডিটর

মার্জিন প্রোপার্টির মান বা value

বিভিন্ন একক ব্যবহার করে সিএসএস এর মার্জিন প্রোপার্টি গুলোর মান নির্ধারণ করা যায়।, যেমন - নির্দিষ্ট বা fixed মান ব্যবহার করে কিংবা শতকরা পদ্ধতিতে, ইত্যাদি।

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

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

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

নিচে সিএসএস এর margin শর্টহ্যান্ড প্রোপার্টির সিনট্যাক্স দেখুন।

silector {margin: value;}

কোড এডিটর

সিএসএস margin প্রোপার্টি কে মান বা value লেখার ওপর নির্ভর করে চার ভাবে ব্যবহার করা যায়।

margin প্রোপার্টি - 4টি মান বা value

margin প্রোপার্টি তে 4 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে প্রথম মানটি এইচটিএমএল এলিমেন্ট এর ওপর দিকের মার্জিন, দ্বিতীয় মানটি ডান দিকের মার্জিন, তৃতীয়টি নিচের দিকের মার্জিন এবং চতুর্থটি বাঁ দিকের মার্জিন নির্ধারণ করে।

সিএসএস এর margin শর্টহ্যান্ড প্রোপার্টিতে 4 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।

div {
    margin: 40px 60px 80px 100px;
    }

কোড এডিটর

margin প্রোপার্টি - 3টি মান বা value

সিএসএস এর margin শর্টহ্যান্ড প্রোপার্টিতে 3 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।

div {
    margin: 40px 60px 80px;
    }

কোড এডিটর

margin প্রোপার্টি - 2টি মান বা value

সিএসএস এর margin শর্টহ্যান্ড প্রোপার্টিতে 2 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।

div {
    margin: 40px 60px;
    }

কোড এডিটর

margin প্রোপার্টি - 1টি মান বা value

সিএসএস এর margin শর্টহ্যান্ড প্রোপার্টিতে 1 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।

div {
    margin: 40px;
    }

কোড এডিটর

inherit মান

margin প্রোপার্টিতে inherit মান বা value ব্যবহার করা হলে তা parent এলিমেন্ট এর মান গ্রহন করে।

inherit মান ব্যবহার করে নিচে একটি উদাহরন দেখুন।

div {
    border-left: 2px solid green;
    margin-left: 80px;
    }

p {
   margin-left: inherit;
  }

কোড এডিটর

সকল মার্জিন প্রোপার্টি