margin প্রপার্টি
margin প্রপার্টি এলিমেন্টের বাহ্যিক
মার্জিন সেট করে। প্রপার্টির মান হতে পারে
যেকোনো আকারের একক
অথবা কীওয়ার্ড প্রপার্টি auto,
যা ব্রাউজারকে এলিমেন্টের মার্জিন স্বাধীনভাবে গণনা করতে
দেয়। ডিফল্টভাবে প্রতিটি ব্রাউজার
এলিমেন্টে বিভিন্ন মার্জিন যোগ করতে পারে।
প্রপার্টিটি হলো নিম্নলিখিত প্রপার্টিগুলোর জন্য সংক্ষিপ্ত রূপ
margin-top,
margin-right,
margin-bottom,
margin-left।
সিনট্যাক্স
সিলেক্টর {
margin: মান;
}
মানের সংখ্যা
margin প্রপার্টি 1,
2, 3 বা 4টি মান নেয়,
যেগুলো স্পেস দ্বারা আলাদা করে লেখা হয়:
| সংখ্যা | বর্ণনা |
|---|---|
1 |
একটি মান এলিমেন্টের সব দিক থেকে মার্জিন সেট করে। |
2 |
প্রথম মান উপরে এবং নিচে মার্জিন সেট করে, এবং দ্বিতীয়টি - ডানে এবং বামে। |
3 |
প্রথম মান উপরে মার্জিন সেট করে, দ্বিতীয়টি - ডানে এবং বামে, এবং তৃতীয়টি - নিচে। |
4 |
প্রথম মান উপরে মার্জিন সেট করে, দ্বিতীয়টি - ডানে, তৃতীয়টি - নিচে, এবং চতুর্থটি - বামে। |
উদাহরণ
এখন আমাদের কাছে একটি ব্লক থাকবে যার কোনো মার্জিন নেই:
<div id="parent">
<div id="elem"></div>
</div>
#parent {
border: 1px solid black;
display: inline-block;
}
#elem {
margin: 0;
border: 1px solid red;
width: 100px;
height: 100px;
}
:
উদাহরণ
এখন ব্লকটিকে 10px মার্জিন দেব:
<div id="parent">
<div id="elem"></div>
</div>
#parent {
border: 1px solid black;
display: inline-block;
}
#elem {
margin: 10px;
border: 1px solid red;
width: 100px;
height: 100px;
}
:
উদাহরণ
ব্লকটিকে উপরে এবং নিচে 10px মার্জিন
এবং বামে ও ডানে 20px মার্জিন দেব:
<div id="parent">
<div id="elem"></div>
</div>
#parent {
border: 1px solid black;
display: inline-block;
}
#elem {
margin: 10px 20px;
border: 1px solid red;
width: 100px;
height: 100px;
}
:
উদাহরণ
ব্লকটিকে উপরে 5px মার্জিন,
ডানে 15px মার্জিন, নিচে 25px মার্জিন এবং বামে 35px
মার্জিন দেব:
<div id="parent">
<div id="elem"></div>
</div>
#parent {
border: 1px solid black;
display: inline-block;
}
#elem {
margin: 5px 15px 25px 35px;
border: 1px solid red;
width: 100px;
height: 100px;
}
:
আরও দেখুন
-
paddingপ্রপার্টি,
যা অভ্যন্তরীণ মার্জিন সেট করে
