X

X

X

CSS -এ Padding -এর ব্যবহার


This element has a padding of 70px.

নিজে নিজে চেষ্টা করুন »


CSS Padding

কনেন্টের চারপাশে ফাঁকা জায়গা তৈরি বা প্রদর্শণ করার জন্য padding ব্যবহার করা হয়। কোনো ইলামেন্টের বর্ডার এবং কন্টেন্টের মধ্যবর্তী ফাঁকা জায়গাকে প্যাডিং বলা হয়।

সিএসএস দিয়ে একই সাথে এবং পৃথকভাবে কোনো ইলামেন্টের চারটি প্যাডিং-এর মান সেট করা যায়।


ইলামেন্টের প্রতিটি পাশে প্যাডিং সেট করার নিয়ম

প্রতিটি ইলামেন্টের চার ধরণের প্যাডিং রয়েছে। যেমন –

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

এদের মান নিম্নরূপে সেট করা হয়:

  • length – px, pt, cm ইত্যাদি এককে প্যাডিং এর মান সেট করা হয়।
  • % – প্যারেন্ট বা ধারক ইলামেন্টে প্যাডিং এর মানের সাপেক্ষে শতকরা হারে প্যাডিং এর মান সেট করা হয়।
  • inherit – এটি দিয়ে প্যারেন্ট ইলামেন্টের প্যাডিং এর অনুরূপ মান কোনো ইলামেন্টে সেট করা হয়।

নিচের উদাহরণে <p> element এর চারটি প্যাডিং এর মান সেট করানো দেখানো হলো:

Code Example

<style>
div {
    border: 1px solid black;
    background-color: lightblue;
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Padding ব্যবহারের সংক্ষিপ্ত নিয়ম

কোনো ইলামেন্টের চারটি প্যাডিংয়ের মান একসাথে সেট করা জন্যpadding property ব্যবহার করা হয়। মান সেট করার ক্রম হচ্ছে:

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

Code Example

<style>
div {
    border: 1px solid black;
    background-color: lightblue;
    padding: 50px 30px 50px 80px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

নিচে দেখানো হলো এটি কিভাবে কাজ করে:

যদি padding property এর চারটি মান থাকে, যেমন :

  • padding: 25px 50px 75px 100px;
    • top padding হলো 25px
    • right padding হলো 50px
    • bottom padding হলো 75px
    • left padding হলো 100px

যদি padding property এর তিনটি মান থাকে, যেমন :

  • padding: 25px 50px 75px;
    • top padding হলো 25px
    • right এবং left padding হলো 50px
    • bottom padding হলো 75px

যদি padding property এর দুটি মান থাকে, যেমন :

  • padding: 25px 50px;
    • top এবং bottom padding হলো 25px
    • right এবং left padding হলো 50px

যদি padding property এর একটি মান থাকে, যেমন :

  • padding: 25px;
    • চারটি প্যাডিংয়ের মান হলো 25px

Code Example

<style>
div {
    border: 1px solid black;
    background-color: lightblue;
}

div.ex1 {
    padding: 25px 50px 75px 100px;
}

div.ex2 {
    padding: 25px 50px 75px;
}

div.ex3 {
    padding: 25px 50px;
}

div.ex4 {
    padding: 25px;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


CSS Padding Property গুলোর তালিকা

Property বর্ণনা
padding একটি ডেক্লারেশনের মাধ্যমে চারটি প্যাডিংয়ের মান সেট করার জন্য ব্যবহৃত হয়।
padding-bottom কোনো ইলামেন্টের নিচের প্যাডিং এর মান সেট করার জন্য ব্যবহৃত হয়।
padding-left কোনো ইলামেন্টের বাম প্যাডিং এর মান সেট করার জন্য ব্যবহৃত হয়।
padding-right কোনো ইলামেন্টের ডান প্যাডিং এর মান সেট করার জন্য ব্যবহৃত হয়।
padding-top কোনো ইলামেন্টের উপরের প্যাডিং এর মান সেট করার জন্য ব্যবহৃত হয়।