সিএসএস margin প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| margin | ১.০ | ৪.০ | ১.০ | ১.০ | ৩.৫ |
সংজ্ঞা ও ব্যবহার
margin হলো একটি ডিক্লেয়ারেশনের মাধ্যমে মার্জিন সংক্রান্ত সকল প্রোপার্টি সেট করার একটি সংক্ষিপ্ত প্রোপার্টি । এই প্রোপার্টিটির এক থেকে চারটি ভ্যালু থাকতে পারে।
উদাহরণ:
- margin:10px 5px 15px 20px;
- উপরের মার্জিন হলো 10px
- ডানের মার্জিন হলো 5px
- নিচের মার্জিন হলো 15px
- বামের মার্জির হলো 20px
- margin:10px 5px 15px ;
- উপরের মার্জিন হলো 10px
- ডানের এবং বামের মার্জিন হলো 5px
- নিচের মার্জিন হলো 15px
- margin:10px 5px;
- উপরের এবং নিচের মার্জিন হলো 10px
- ডানের এবং বামের মার্জিন হলো 5px
- margin:10px;
- চারটি মার্জিনই হলো 10px
পরামর্শঃ
- নেগেটিভ ভ্যালু অনুমিত।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| ০ | না | হ্যাঁ । আরোও জানতে animatable অধ্যায় ভিজিট করুন। animatableএর উদাহরণ |
সিএসএস সিনট্যাক্স
margin: length/auto/initial/inherit;
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস Margin Collapse রেফারেন্স উদাহরণ</title>
<style>
p.ex1 {
margin: 2cm 4cm 3cm 4cm;
}
</style>
</head>
<body>
<p>এই অনুচ্ছেদে মার্জিন নিদ্দিষ্ট করা হয় নি।</p>
<p class="ex1">এই অনুচ্ছেদে মার্জিন নিদ্দিষ্ট করে দেওয়া হয়।</p>
<p>এই অনুচ্ছেদে মার্জিন নিদ্দিষ্ট করে দেওয়া হয়।</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.margin="100px 50px"উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস Javascript উদাহরণ</title>
<style>
#test {
width: 500px;
height: 500px;
background-color: lightblue;
}
</style>
</head>
<body>
<p>DIV এলিমেন্টের মার্জিন পরিবর্তনের জন্য "Try it" বাটন ক্লিক করুন।</p>
<button onclick="myFunction()">Try it</button>
<div id="test">
এটা আমার DIV ইলিমেন্ট
</div>
<script>
function myFunction() {
document.getElementById("test").style.margin = "100px 50px";
}
</script>
</body>
</html>
ফলাফল
Margin Collapse
এলিমেন্টের উপরের এবং নিচের মার্জিন মাঝে মাঝে একটি মার্জিনে একীভূত হয় যা সবচেয়ে বড় দুটি মার্জিনের সমান হয়।
এটি অনুভূমিক(horizontal) মার্জিনের ক্ষেত্রে ঘটে না(ডান এবং বাম)! এটি শুধুমাত্র উল্লম্ব(vertical) মার্জিনের ক্ষেত্রে ঘটে(উপর এবং নিচ)!
নিচের উদাহরণটি লক্ষ্য করুন:
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস Margin এর উদাহরণ</title>
<style>
h1 {
margin: 0 0 30px 0;
}
p {
margin: 20px 0 0 0;
}
</style>
</head>
<body>
<h1>শিরোনাম ১</h1>
<p>একটি অনুচ্ছেদ</p>
</body>
</html>
ফলাফল
উপরোক্ত উদাহরণে, <h1> এলিমেন্টে নিম্ন মার্জিন 30px রয়েছে। <p> এলিমেন্টে শীর্ষ মার্জিন সেট করা হয়েছে 20px ।
সাধারন ভাবে <h1>
এবং <p> এলিমেন্টের মধ্যে মার্জিন হওয়ার কথা 50px(30px+ 20px)। কিন্তু মার্জিন কলাপ্সের ধরন মার্জিন হবে 30px ।
margin প্রোপার্টির ভ্যালু-সমূহ
- length - px, pt, cm ইত্যাদির মাধ্যমে মার্জিন নির্দিষ্ট করে। ডিফল্ট ভ্যালু হলো হয় 0 ।
- % - ধারনকারী এলিমেন্টের সাপেক্ষে শতকরায় মার্জিন নির্দিষ্ট করে।
- auto - ব্রাউজার স্বয়ংক্রিয় ভাবে একটি মার্জিন নির্ধারণ করে।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
margin প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।