CSS Margin

By /

CSS মার্জিন:

CSS মার্জিন বৈশিষ্ট্য উপাদানগুলির চারপাশে স্থান নির্ধারণ করতে ব্যবহৃত হয়। এটি সম্পূর্ণ স্বচ্ছ এবং এর কোনো ব্যাকগ্রাউন্ড কালার নেই। এটি উপাদানটির চারপাশে একটি এলাকা পরিষ্কার করে।

উপরে, নীচে, বাম এবং ডান মার্জিন পৃথক বৈশিষ্ট্য ব্যবহার করে স্বাধীনভাবে পরিবর্তন করা যেতে পারে। আপনি শর্টহ্যান্ড মার্জিন সম্পত্তি ব্যবহার করে একবারে সমস্ত বৈশিষ্ট্য পরিবর্তন করতে পারেন।

নিম্নলিখিত CSS মার্জিন বৈশিষ্ট্য আছে:

CSS মার্জিন বৈশিষ্ট্য:

Property Description
margin এই বৈশিষ্ট্যটি একটি ঘোষণায় সমস্ত বৈশিষ্ট্য সেট করতে ব্যবহৃত হয়।
margin-left এটি একটি উপাদানের বাম মার্জিন সেট করতে ব্যবহৃত হয়।
margin-right এটি একটি উপাদানের ডান মার্জিন সেট করতে ব্যবহৃত হয়।
margin-top এটি একটি উপাদানের শীর্ষ মার্জিন সেট করতে ব্যবহৃত হয়।
margin-bottom এটি একটি উপাদানের নীচের মার্জিন সেট করতে ব্যবহৃত হয়।

CSS মার্জিন মান:

এগুলি মার্জিন সম্পত্তির জন্য কিছু সম্ভাব্য মান।

Value Description
auto এটি ব্রাউজারকে একটি মার্জিন গণনা করতে ব্যবহার করা হয়।
length এটি একটি মার্জিন pt, px, cm ইত্যাদি নির্দিষ্ট করতে ব্যবহৃত হয়। এর ডিফল্ট মান হল 0px।
% এটি উপাদানের প্রস্থের শতাংশে একটি মার্জিন সংজ্ঞায়িত করতে ব্যবহৃত হয়।
inherit এটি অভিভাবক উপাদান থেকে মার্জিন উত্তরাধিকারী করতে ব্যবহৃত হয়।

দ্রষ্টব্য: আপনি কন্টেন্ট ওভারল্যাপ করতে নেতিবাচক মানও ব্যবহার করতে পারেন।

CSS মার্জিনের উদাহরণ:

আপনি একটি উপাদানের জন্য বিভিন্ন পক্ষের জন্য বিভিন্ন মার্জিন সংজ্ঞায়িত করতে পারেন।

  1. >  
  2. /html>  
  3. <head>  
  4. <style>  
  5. p {  
  6.     background-color: pink;  
  7. }  
  8. p.ex {  
  9.     margin-top: 50px;  
  10.     margin-bottom: 50px;  
  11.     margin-right: 100px;  
  12.     margin-left: 100px;  
  13. }  
  14. style>  
  15. head>  
  16. <body>  
  17. <p>This paragraph is not displayed with specified margin. p>  
  18. <p class=“ex”>This paragraph is displayed with specified margin.p>  
  19. </body 
  20. >  

মার্জিন: শর্টহ্যান্ড সম্পত্তি:

CSS শর্টহ্যান্ড প্রপার্টি কোড ছোট করতে ব্যবহার করা হয়। এটি একটি সম্পত্তিতে সমস্ত মার্জিন বৈশিষ্ট্য নির্দিষ্ট করে।

মার্জিন সম্পত্তি নির্দিষ্ট করার জন্য চার ধরনের আছে। আপনি তাদের একটি ব্যবহার করতে পারেন.

  1. margin: 50px 100px 150px 200px;
  2. margin: 50px 100px 150px;
  3. margin: 50px 100px;
  4. margin 50px;

1) মার্জিন: 50px 100px 150px 200px;

এটি সনাক্ত করে যে:

শীর্ষ মার্জিন মান 50px

ডান মার্জিনের মান হল 100px

নিচের মার্জিনের মান হল 150px

বাম মার্জিন মান হল 200px

  1. >  
  2. >  
  3. <head>  
  4. <style>  
  5. p {  
  6.     background-color: pink;  
  7. }  
  8. p.ex {  
  9.     margin: 50px 100px 150px 200px;  
  10. }  
  11. style>  
  12. head>  
  13. </body>  
  14. <p>This paragraph is not displayed with specified margin. p>  
  15. <p class=“ex”>This paragraph is displayed with specified margin.p>  
  16. </body>  
  17. >   

2) মার্জিন: 50px 100px 150px;

এটি সনাক্ত করে যে:

শীর্ষ মার্জিন মান 50px

বাম এবং ডান মার্জিন মান হল 100px

নিচের মার্জিনের মান হল 150px

  1. >  
  2. /html>  
  3. <head>  
  4. <style>  
  5. p {  
  6.     background-color: pink;  
  7. }  
  8. p.ex {  
  9.     margin: 50px 100px 150px;  
  10. }  
  11. style>  
  12. head>  
  13. <body>  
  14. <p>This paragraph is not displayed with specified margin. p>  
  15. <p class=“ex”>This paragraph is displayed with specified margin.p>  
  16. body>  
  17. </html>   

3) মার্জিন: 50px 100px;

এটি সনাক্ত করে যে:

উপরের এবং নীচের মার্জিনের মান 50px

বাম এবং ডান মার্জিন মান হল 100px

  1. >  
  2. /html>  
  3. <head>  
  4. <style>  
  5. p {  
  6.     background-color: pink;  
  7. }  
  8. p.ex {  
  9.     margin: 50px 100px;  
  10. }  
  11. style>  
  12. head>  
  13. <body>  
  14. <p>This paragraph is not displayed with specified margin. p>  
  15. <p class=“ex”>This paragraph is displayed with specified margin.p>  
  16. body>  
  17. </html>

4) মার্জিন: 50px;

এটি সনাক্ত করে যে:

উপরে ডান নীচে এবং বাম মার্জিন মান 50px

  1. >  
  2. /html>  
  3. <head>  
  4. <style>  
  5. p {  
  6.     background-color: pink;  
  7. }  
  8. p.ex {  
  9.     margin: 50px;  
  10. }  
  11. style>  
  12. head>  
  13. <body>  
  14. <p>This paragraph is not displayed with specified margin. p>  
  15. <p class=“ex”>This paragraph is displayed with specified margin.p>  
  16. body>  
  17. </html>   


Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top