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

বর্ডারের ভিতরে এবং কন্টেন্টের(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>

ফলাফল

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

সিএসএস টিউটোরিয়াল

সিএসএস-৩

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

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

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