margin প্রপার্টি

margin প্রপার্টি এলিমেন্টের বাহ্যিক মার্জিন সেট করে। প্রপার্টির মান হতে পারে যেকোনো আকারের একক অথবা কীওয়ার্ড প্রপার্টি auto, যা ব্রাউজারকে এলিমেন্টের মার্জিন স্বাধীনভাবে গণনা করতে দেয়। ডিফল্টভাবে প্রতিটি ব্রাউজার এলিমেন্টে বিভিন্ন মার্জিন যোগ করতে পারে।

প্রপার্টিটি হলো নিম্নলিখিত প্রপার্টিগুলোর জন্য সংক্ষিপ্ত রূপ margin-top, margin-right, margin-bottom, margin-left।

সিনট্যাক্স

cssসিলেক্টর {
  margin: মান;
}

মানের সংখ্যা

margin প্রপার্টি 1, 2, 3 বা 4টি মান নেয়, যেগুলো স্পেস দ্বারা আলাদা করে লেখা হয়:

উদাহরণ

এখন আমাদের কাছে একটি ব্লক থাকবে যার কোনো মার্জিন নেই:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 0;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

উদাহরণ

এখন ব্লকটিকে 10px মার্জিন দেব:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 10px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

উদাহরণ

ব্লকটিকে উপরে এবং নিচে 10px মার্জিন এবং বামে ও ডানে 20px মার্জিন দেব:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 10px 20px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

উদাহরণ

ব্লকটিকে উপরে 5px মার্জিন, ডানে 15px মার্জিন, নিচে 25px মার্জিন এবং বামে 35px মার্জিন দেব:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 5px 15px 25px 35px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

আরও দেখুন