CSS আমাদেরকে একটি উপাদানের পৃথক পক্ষের চারপাশে স্থান নিয়ন্ত্রণ করতে দেয়। CSS মার্জিন প্রপার্টি হল নিম্নোক্ত বৈশিষ্ট্যগুলির জন্য একটি সংক্ষিপ্ত বিবরণ:মার্জিন-টপ, মার্জিন-ডান, মার্জিন-বটম এবং মার্জিন-বাম।
সিনট্যাক্স
CSS মার্জিন সম্পত্তির সিনট্যাক্স নিম্নরূপ -
Selector {
margin-top: /*value*/
margin-right: /*value*/
margin-bottom: /*value*/
margin-left: /*value*/
} নিম্নলিখিত উদাহরণগুলি CSS মার্জিন সম্পত্তি −
কে চিত্রিত করেউদাহরণ
<!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> আউটপুট
