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