সিএসএস মার্জিন(CSS Margin)
সিএসএস(CSS) টিউটোরিয়াল
মার্জিন বৈশিষ্ট্যটি এইচটিএমএল উপাদানটির চারপাশে স্থান নির্ধারণ করে। সামগ্রীতে ওভারল্যাপ করতে নেতিবাচক মানগুলি ব্যবহার করা সম্ভব।
প্রান্তিক সম্পত্তির মানগুলি শিশু উপাদানগুলির দ্বারা উত্তরাধিকার সূত্রে প্রাপ্ত হয় না। মনে রাখবেন যে সংলগ্ন উল্লম্ব মার্জিনগুলি (শীর্ষ এবং নীচে মার্জিন) একে অপরের সাথে ধসে পড়বে যাতে ব্লকের মধ্যকার দূরত্ব মার্জিনের যোগফল না হয় তবে কেবল দুটি মার্জিনের বৃহত্তর বা একই আকারের সাথে একটি মার্জিন হিসাবে যদি উভয় হয় সমান.
- একটি উপাদান মার্জিন সেট করার জন্য আমাদের নীচের বৈশিষ্ট্য রয়েছে।
- মার্জিন একটি ঘোষণায় মার্জিন বৈশিষ্ট্য নির্ধারণের জন্য একটি শর্টহ্যান্ড সম্পত্তি নির্দিষ্ট করে।
- মার্জিন-নীচে একটি উপাদানের নীচের মার্জিন নির্দিষ্ট করে।
- মার্জিন-শীর্ষ একটি উপাদানের শীর্ষ মার্জিন নির্দিষ্ট করে।
- মার্জিন-বাম একটি উপাদানের বাম মার্জিন নির্দিষ্ট করে।
- মার্জিন-ডান একটি উপাদানের ডান মার্জিন নির্দিষ্ট করে।
মার্জিন সম্পত্তি
মার্জিন সম্পত্তি আপনাকে ঘোষণায় চারটি মার্জিনের জন্য সমস্ত সম্পত্তি সেট করতে দেয়। একটি অনুচ্ছেদের চারপাশে মার্জিন সেট করার সিনট্যাক্সটি এখানে রয়েছে
উদাহরনঃ
<html>
<head>
</head>
<body>
<p style = "margin: 15px; border:1px solid black;">
all four margins will be 15px
</p>
<p style = "margin:10px 2%; border:1px solid black;">
top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document.
</p>
<p style = "margin: 10px 2% -10px; border:1px solid black;">
top margin will be 10px, left and right margin will be 2% of the
total width of the document, bottom margin will be -10px
</p
<p style = "margin: 10px 2% -10px auto; border:1px solid black;">
top margin will be 10px, right margin will be 2% of the total
width of the document, bottom margin will be -10px, left margin
will be set by the browser
</p>
</body>
</html>
প্রান্তিক নীচে সম্পত্তি
মার্জিন-নীচের সম্পত্তি আপনাকে একটি উপাদানের নীচের মার্জিন সেট করতে দেয়। এটির দৈর্ঘ্য,% বা স্বয়ংক্রিয় মান থাকতে পারে।
উদাহরনঃ
<html>
<head>
</head>
<body>
<p style = "margin-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom margin
</p>
<p style = "margin-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom margin in percent
</p>
</body>
</html>
মার্জিন-শীর্ষ সম্পত্তি
মার্জিন-শীর্ষ সম্পত্তি আপনাকে কোনও উপাদানের শীর্ষ মার্জিন সেট করতে দেয়। এটির দৈর্ঘ্য,% বা স্বয়ংক্রিয় মান থাকতে পারে।
উদাহরনঃ
<html>
<head>
</head>
<body>
<p style = "margin-top: 15px; border:1px solid black;">
This is a paragraph with a specified top margin
</p>
<p style = "margin-top: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>
মার্জিন-বামে সম্পত্তি
মার্জিন-বাম সম্পত্তি আপনাকে একটি উপাদানের বাম মার্জিন সেট করতে দেয়। এটির দৈর্ঘ্য,% বা স্বয়ংক্রিয় মান থাকতে পারে।
উদাহরনঃ
<html>
<head>
</head>
<body>
<p style = "margin-left: 15px; border:1px solid black;">
This is a paragraph with a specified left margin
</p>
<p style = "margin-left: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>
</body>
</html>
মার্জিন-ডান সম্পত্তি
মার্জিন-ডান সম্পত্তি আপনাকে কোনও উপাদানের ডান মার্জিন সেট করতে দেয়। এটির দৈর্ঘ্য,% বা স্বয়ংক্রিয় মান থাকতে পারে।
উদাহরনঃ
<html>
<head>
</head>
<body>
<p style = "margin-right: 15px; border:1px solid black;">
This is a paragraph with a specified right margin
</p>
<p style = "margin-right: 5%; border:1px solid black;">
This is another paragraph with a specified right margin in percent
</p>
</body>
</html>