সিএসএস
🌈সিএসএস কি?
📋সিএসএস হলো বাইরের ফাঁকা জায়গা নির্দিষ্ট করার পদ্ধতি।
⚒️সিএসএস বাইরের ফাঁকা জায়গা নির্দিষ্ট করতে ব্যবহৃত হয়।
সিএসএস সমূহ
সিএসএস এবং সেগুলোর ব্যবহারের তালিকা
- ➡️ margin - মার্জিনের বৈশিষ্ট্য নির্ধারণ করা
- ➡️ margin-left - বাম মার্জিন নির্ধারণ করা
- ➡️ margin-right - ডান মার্জিন নির্ধারণ করা
- ➡️ margin-top - উপরের মার্জিন নির্ধারণ করা
- ➡️ margin-bottom - নিচের মার্জিন নির্ধারণ করা
- ➡️ margin-inline - ইনলাইন দিকের মার্জিনের বৈশিষ্ট্য নির্ধারণ করা
- ➡️ margin-block - ব্লক দিকের মার্জিনের বৈশিষ্ট্য নির্ধারণ করা
margin - মার্জিনের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
border: 1px solid red;
margin: 20px;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
margin-left - বাম মার্জিন নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
border: 1px solid red;
margin-left: 100px;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
margin-right - ডান মার্জিন নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
border: 1px solid red;
margin-right: 100px;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
margin-top - উপরের মার্জিন নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
border: 1px solid red;
margin-top: 100px;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
margin-bottom - নিচের মার্জিন নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
border: 1px solid red;
margin-bottom: 100px;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
margin-inline - ইনলাইন দিকের মার্জিনের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
border: 1px solid red;
margin-inline: 100px;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
margin-block - ব্লক দিকের মার্জিনের বৈশিষ্ট্য নির্ধারণ করার উদাহরণ।
css
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
border: 1px solid red;
margin-block: 100px;
}
</style>
</head>
<body>
<div>
<h1>প্রোগ্রামিং শিখুন</h1>
<p>প্রোগ্রামিং শিখে নিজের ক্যারিয়ার গড়ে তুলুন</p>
</div>
</body>
</html>
সিএসএস সম্পর্কিত বিস্তারিত তথ্য
কার্যকর কোডিং উদাহরণ এবং সেগুলোর রেফারেন্স লিংক
| নাম | বিবরণ |
|---|---|
| margin | মার্জিনের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়। |
| margin-left | বাম মার্জিন নির্ধারণ করতে ব্যবহৃত হয়। |
| margin-right | ডান মার্জিন নির্ধারণ করতে ব্যবহৃত হয়। |
| margin-top | উপরের মার্জিন নির্ধারণ করতে ব্যবহৃত হয়। |
| margin-bottom | নিচের মার্জিন নির্ধারণ করতে ব্যবহৃত হয়। |
| margin-inline | ইনলাইন দিকের মার্জিনের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়। |
| margin-block | ব্লক দিকের মার্জিনের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়। |