CSS margin প্রপার্টি margin-top, margin-right, margin-bottom, এবং margin-left-এর শর্টহ্যান্ড। এটি এলিমেন্টের চারপাশে স্পেস নির্দিষ্ট করতে সক্ষম করে। আমরা পৃথক পক্ষের মার্জিনও সেট করতে পারি।
সিনট্যাক্স
CSS margin প্রপার্টির সিনট্যাক্স নিচের মতো:
Selector { margin: /*value*/ }
উদাহরণ
নিচের উদাহরণগুলো CSS margin প্রপার্টি ব্যাখ্যা করে:
<!DOCTYPE html> <html> <head> <style> div { margin: 10px 50px 20px; padding: 1rem; border: dashed; } p { text-align: center; } #demo { margin-left: -80px; box-shadow: inset 0 0 10px brown; } </style> </head> <body> <div></div> <p>This is demo text.</p> <p id="demo">Another demo text.</p> <p>This is new demo text.</p> </body> </html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> ul { margin: auto; background-image: linear-gradient(to right, khaki, aliceblue, skyblue, rebeccapurple); width: 20em; } li { margin-top: 3px; } li + li { margin-left: -20px; } li:last-child { margin-left: 75px; } </style> </head> <body> <h2>Demo Heading</h2> <ul> <li>This is demo list item.</li> <li>This is another list item with different style.</li> <li>This is our third demo text with another style. </li> </ul> </body> </html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
