সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

সিএসএস মার্জিন


সিএসএস মার্জিন

একটি এলিমেন্টের চারপাশে স্পেস রাখার জন্য সিএসএস margin প্রোপার্টিটি ব্যবহার করা হয়।

সিএসএস margin প্রোপার্টি দ্বারা একটি এলিমেন্টের বর্ডার এর বাহিরে কি পরিমান ফাকা জায়গা থাকবে তা সেট করা হয়।

সিএসএস এর মাধ্যমে, আপনি মার্জিনকে নিয়ন্ত্রণ করতে পারেন। একটি এলিমেন্টের চারপাশে পৃথক পৃথক মার্জিন সেট করার জন্য পৃথক পৃথক সিএসএস margin প্রোপার্টি রয়েছে। যেগুলো হলো: top, right, bottom এবং left।


এই এলিমেন্টটিতে 50px মার্জিন ব্যবহার করা হয়েছে।


এক নজরে সিএসএস মার্জিন প্রোপার্টিসমূহ

margin

একটি ডিক্লেয়ারেশনের মাধ্যমে মার্জিনের সবগুলো প্রোপার্টি সেট করার একটি শর্টহ্যান্ড প্রোপার্টি।

margin-top

এলিমেন্টের উপরের মার্জিন সেট করার জন্য ব্যবহৃত হয়।

margin-right

এলিমেন্টের ডানের মার্জিন সেট করার জন্য ব্যবহৃত হয়।

margin-bottom

এলিমেন্টের নিচের মার্জিন সেট করার জন্য ব্যবহৃত হয়।

margin-left

এলিমেন্টের বামের মার্জিন সেট করার জন্য ব্যবহৃত হয়।



পৃথক পৃথক মার্জিন প্রোপার্টিসমূহ

একটি এলিমেন্ট চারপাশে পৃথকভাবে মার্জিন সেট করার জন্য সিএসএসে ব্যবহৃত margin প্রোপার্টিসমূহ নিম্নে তুলে ধরা হলোঃ-

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

এই মার্জিন প্রোপার্টিগুলো নিচের ভ্যালুসমূহ গ্রহণ করতে পারেঃ

  • auto - ব্রাউজার নিজ থেকে মার্জিন নিয়ে নেয়।
  • length - px, pt, cm, ইত্যাদি একক ব্যবহার করে মার্জিন সেট করা হয়
  • % - সংশ্লিষ্ট এলিমেন্টের প্রস্থ(width) অনুযায়ী মার্জিন সেট করা হয়।
  • inherit - প্যারেন্ট(parent) ট্যাগ এর সাপেক্ষে উত্তরাধিকার সূ্ত্রে মার্জিন নিয়ে নেয়।

নিচের উদাহরণে <p> এলিমেন্টের প্রত্যেক পাশে বিভিন্ন প্রকার মার্জিনের ব্যবহার দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  div {
    border: 2px solid blue;
    margin-top: 80px;
    margin-bottom: 110px;
	margin-right: 130px;
	margin-left: 100px;
	background-color: #0099aa;
	padding:8px;
  }
  </style>
</head>
<body>

  <div>এই div এলিমেন্টের উপরে 80px, ডানে 130px, নিচে 110px এবং বামে 100px মার্জিন সেট করা হয়েছে।</div>

</body>
</html>

ফলাফল





মার্জিন - শর্টকাট প্রোপার্টি

কোড সংক্ষিপ্ত করার জন্য সকল মার্জিন প্রোপার্টিকে একটি শর্টকাট প্রোপার্টির মাধ্যমে প্রকাশ করা সম্ভব।

নিচের পৃথক পৃথক মার্জিন প্রোপার্টিসমূহের শটকার্ট প্রোপার্টি হলো margin প্রোপার্টিঃ

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  div {
	border: 2px solid blue;
	margin: 80px 130px 110px 100px;
	background-color: #0099aa;
	padding:8px;
  }
  </style>
</head>
<body>

  <div>এই div এলিমেন্টের উপরে 80px, ডানে 130px, নিচে 110px, এবং বামে 100px মার্জিন সেট করা হয়েছে।</div>

</body>
</html>

ফলাফল





উপরের উদাহরনটি কিভাবে কাজ করে নিচে তা উদাহরণসহ ব্যাখ্যা করা হলোঃ

যদি margin প্রোপার্টিতে চারটি ভ্যালু থাকেঃ

    যেমন- margin: 50px 40px 80px 70px;
    • উপরের মার্জিন 50px হবে।
    • ডানের মার্জিন 40px হবে।
    • নিচের মার্জিন 80px হবে।
    • বামের মার্জিন 70px হবে।

যদি margin প্রোপার্টিতে তিনটি ভ্যালু থাকেঃ

    যেমন- margin: 50px 40px 80px;
    • উপরের মার্জিন 50px হবে।
    • ডান ও বামের মার্জিন 40px হবে।
    • নিচের মার্জিন 80px হবে।

যদি margin প্রোপার্টিতে দুইটি ভ্যালু থাকেঃ

    যেমন- margin: 50px 80px;
    • উপরের এবং নিচের মার্জিন 50px হবে।
    • ডানের ও বামের মার্জিন 80px হবে।

যদি margin প্রোপার্টিতে একটি ভ্যালু থাকেঃ

    যেমন- margin: 50px;
    • চার পাশের মার্জিন 50px হবে।


"auto" ভ্যালুর ব্যবহার

একটি এলিমেন্ট যে কন্টেইনারের মধ্যে আছে সেই কন্টেইনারের অনুভূমিক বরাবর যদি সেটিকে সেন্টারে রাখতে চান তাহলে margin প্রোপার্টির ভ্যালু auto সেট করুন।

এক্ষেত্রে এলিমেন্টটি স্বয়ংক্রিয়ভাবে নির্দিষ্ট প্রস্থ নিয়ে নিবে এবং অবশিষ্ট ফাঁকা জায়গাটি ডান এবং বামপাশে সমান ভাবে ভাগ করে দিবে। অর্থাৎ এলিমেন্টটি সেন্টারে অবস্থান করবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  div {
	width:320px;
	margin: auto;
	border: 2px solid teal;
	padding: 8px;
  }
  </style>
</head>
<body>

  <h2>auto ভ্যালুর ব্যবহার</h2>
  <div>এই div টিতে  margin: auto; সেট করা হয়েছে।</div>

</body>
</html>

ফলাফল





"inherit" ভ্যালুর ব্যবহার

নিচের উদাহরণে পেরেন্ট এলিমেন্ট থেকে inherit এর মাধ্যমে <p> এলিমেন্ট বাম পাশের মার্জিন নিয়ে নেয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  div.main {
	border: 2px solid teal;
	margin-left: 180px;
  }
  p.child {
	margin-left: inherit;
  }
  </style>
</head>
<body>

  <h2>inherit ভ্যালুর ব্যবহার</h2>
  
  <div class="main">
    <p class="child">এই এলিমেন্টের বাম পাশের মার্জিন প্যারেন্ট এলিমেন্ট থেকে এসেছে।</p>
  </div>

</body>
</html>

ফলাফল





মার্জিন কলাপ্স

এলিমেন্টের উপরের এবং নিচের মার্জিন মাঝে-মাঝে কলাপ্স হয়ে সিঙ্গেল মার্জিনে পরিনত হয় এবং যার ভ্যালূ হবে মার্জিন দুটির ভ্যালুর মধ্যে সর্বোচ্চটি।

এটি হরিজন্টাল মার্জিন বা ডান এবং বামের মার্জিনের ক্ষেত্রে ঘটে না। শুধুমাত্র ভার্টিক্যাল মার্জিন বা উপরের এবং নিচের মার্জিনের ক্ষেত্রে ঘটে।

নিচের উদাহরণটি লক্ষ্য করলে এটি আপনার কাছে পরিষ্কার হয়ে যাবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  h1 {
	margin: 0 0 60px 0;
  }
  h2 {
	margin: 40px 0 0 0;
  }
  </style>
</head>
<body>

  <p>মার্জিন কলাপ্সের</p>

  <h1>স্যাট একাডেমি</h1>
  <h2>স্যাট একাডেমি</h2>

</body>
</html>

ফলাফল



এই উদাহরণটিতে <h1> এলিমেন্টের নিচে 60px এবং <h2> এলিমেন্টের উপরে 40px মার্জিন দেয়া হয়েছে।

উপরের উদাহরণ দেখে আপনি খুব সহজেই বলে দিবেন যে, <h1> এবং <h2> এর মধ্যে ভার্টিকাল মার্জিন হবে 100px(60px+40px)। কিন্তু এখানে মার্জিন কলাপ্স ব্যবহৃত হওয়ার কারণে প্রকৃতপক্ষে মার্জিন হবে 60px।