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

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

হোম-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

 

সিএসএস প্যাডিং


সিএসএস প্যাডিং

বর্ডারের ভিতরে এবং কন্টেন্টের(content) চারপাশে ফাঁকা স্থান তৈরি করার জন্য সিএসএস Padding প্রোপার্টিটি ব্যবহার করা হয়।

Padding প্রোপার্টিটি একটি এলিমেন্টের মধ্যে কন্টেন্টের চারপাশে(বর্ডার এর মধ্যে) ফাঁকা জায়গা তৈরি করে।

সিএসএসের মাধ্যমে আপনি প্যাডিংকে সম্পূর্ণভাবে নিয়ন্ত্রন করতে পারেন। সিএসএস Padding প্রোপার্টি দ্বারা আপনি একটি এলিমেন্টের প্রত্যেক পাশে যেমন- top, right, bottom এবং left এ পৃথকভাবে প্যাডিং সেট করতে পারেন।


এই এলিমেন্টেটির চারপাশে 50px প্যাডিং ব্যবহার করা হয়েছে।


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

padding

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

padding-top

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

padding-right

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

padding-bottom

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

padding-left

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



পৃথক পৃথক প্যাডিং প্রোপার্টিসমূহ

একটি এলিমেন্টের কন্টেন্টের চারপাশে প্যাডিং সেট করার জন্য সিএসএসে ভিন্ন ভিন্ন প্যাডিং প্রোপার্টি রয়েছে। এগুলো হলোঃ

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

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

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


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

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  p {
    border: 1px solid black;
    background-color: lightblue;
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
  }
  </style>
</head>
<body>

  <p>বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম,
  উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত।
  বাংলাদেশের ভূখণ্ড ভৌগোলিকভাবে একটি উর্বর ব-দ্বীপের অংশ বিশেষ।পার্শ্ববর্তী দেশের রাজ্য পশ্চিমবঙ্গ 
  ও ত্রিপুরা-সহ বাংলাদেশ একটি ভৌগোলিকভাবে জাতিগত ও ভাষাগত "বঙ্গ" অঞ্চলটির মানে পূর্ণ করে।
  "বঙ্গ" ভূখণ্ডের পূর্বাংশ পূর্ব বাংলা নামে পরিচিত ছিল, যা বর্তমানে বাংলাদেশ নামের দেশ।
  পৃথিবীতে যে ক'টি রাষ্ট্র জাতিরাষ্ট্র হিসেবে মর্যাদা পায় তার মধ্যে বাংলাদেশ অন্যতম।</p>

</body>
</html>

ফলাফল





প্যাডিং - শর্টহ্যান্ড প্রোপার্টি

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

নিচের পৃথক পৃথক প্যাডিং প্রোপার্টিসমূহের শর্টহ্যান্ড প্রোপার্টি হলো padding প্রোপার্টিঃ

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  h1 {
    color: green
  }
  p {
    border: 2px solid black;
    background-color: lightseagreen;
    padding: 40px 25px 50px 60px;
    color: white;
  }
  </style>
</head>
<body>

  <h1>প্যাডিং শর্টহ্যান্ড প্রোপার্টির ব্যবহারঃ</h1>
  <p>এই প্যারাগ্রাফটির উপরে 40px, ডানে 25px, নিচে 50px এবং বামে 60px প্যাডিং সেট করা হয়েছে।</p>

</body>
</html>

ফলাফল





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

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

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

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

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

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

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

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

    যেমন- padding: 50px;
    • চারপাশের প্যাডিংই হবে 50px।


উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  div.example1 {
    border: 2px solid red;
    background-color:lightpink;
    color: white;
    padding: 60px 55px 75px 50px;
  }
  div.example2 {
    border: 2px solid red;
    background-color:lightseagreen;
    color: white;
    padding: 55px 50px 75px;
  }
  div.example3 {
    border: 2px solid red;
    background-color:lightsalmon;
    color: white;
    padding: 40px 50px;
  }
  div.example4 {
    border: 2px solid red;
    background-color:lightgrey;
    color: black;
    padding: 40px;
  }
  </style>
</head>
<body>

  <div class="example1">বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম,
    উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত।</div><br>
  <div class="example2">বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম,
    উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত।</div><br>
  <div class="example3">বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম,
    উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত।</div><br>
  <div class="example4">বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের পশ্চিম,
    উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত।</div>

</body>
</html>

ফলাফল