CSS আমাদেরকে একটি এলিমেন্টের পৃথক সাইডের চারপাশের স্পেস নিয়ন্ত্রণ করতে দেয়। CSS margin প্রপার্টি নিচের প্রপার্টিগুলোর একটি শর্টহ্যান্ড: margin-top, margin-right, margin-bottom এবং margin-left।
সিনট্যাক্স
CSS margin প্রপার্টির সিনট্যাক্স নিম্নরূপ:
Selector { margin-top: /*মান*/ margin-right: /*মান*/ margin-bottom: /*মান*/ margin-left: /*মান*/ }
নিচের উদাহরণগুলো CSS margin প্রপার্টি উদাহরণ দেয়:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> div { margin-left: auto; margin-bottom: 4em; width: 30%; padding: 0.6rem; box-shadow: inset 0 0 3px turquoise; outline: thin dotted; text-align: center; } div + div { margin-right: 30%; box-shadow: inset 0 0 6px teal; } div + div + div { margin-left: 45%; margin-top: -190px; box-shadow: inset 0 0 6px orange; } </style> </head> <body> <div> This is demo text </div> <div>One (different margins)</div> <div>Two (different margins)</div> </body> </html>
আউটপুট
আরেকটি উদাহরণ
<!DOCTYPE html> <html> <head> <style> div { margin-top: 7%; margin-left: 25%; margin-bottom: -3em; width: 40px; height: 40px; padding: 0.6rem; box-shadow: inset 0 0 3px turquoise; border-top-right-radius: 100px; } div + div { margin-right: 30%; border-top-right-radius: unset; border-top-left-radius: 100px; box-shadow: inset 0 0 6px teal; } div + div + div { margin-left: 25%; margin-top: -140px; box-shadow: inset 0 0 6px orange; border-bottom-right-radius: 100px; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
আউটপুট
