জয়েন লগইন

সিএসএস

🌈সিএসএস কি?

📋সিএসএস হলো বাইরের ফাঁকা জায়গা নির্দিষ্ট করার পদ্ধতি।

⚒️সিএসএস বাইরের ফাঁকা জায়গা নির্দিষ্ট করতে ব্যবহৃত হয়।

সিএসএস সমূহ

সিএসএস এবং সেগুলোর ব্যবহারের তালিকা

  • ➡️ 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 ব্লক দিকের মার্জিনের বৈশিষ্ট্য নির্ধারণ করতে ব্যবহৃত হয়।