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