CSS প্যাডিং

---

এই এলিমেন্টের প্যাডিং 40px।

---

একটি এলিমেন্টের নির্ধারিত বর্ডারের ভেতরে, কনটেন্টের চারপাশে জায়গা তৈরি করতে CSS-এর padding প্রপার্টি ব্যবহার করা হয়।

CSS দিয়ে, প্যাডিংয়ের উপর আপনার সম্পূর্ণ নিয়ন্ত্রণ থাকে। একটি এলিমেন্টের প্রতিটি পাশের (উপর, ডান, নিচ, এবং বাম) প্যাডিং সেট করার জন্য প্রপার্টি রয়েছে।

---

একটি এলিমেন্টের প্রতিটি পাশের প্যাডিং নির্ধারণের জন্য CSS-এ প্রপার্টি রয়েছে:

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

সব padding প্রপার্টির নিচের মানগুলো থাকতে পারে:

• length - px, pt, cm ইত্যাদিতে একটি প্যাডিং নির্ধারণ করে
• % - কন্টেইনিং এলিমেন্টের প্রস্থের শতাংশে একটি প্যাডিং নির্ধারণ করে
• inherit - নির্ধারণ করে যে প্যাডিং প্যারেন্ট এলিমেন্ট থেকে ইনহেরিট হবে

মনে রাখবেন: ঋণাত্মক মান অনুমোদিত নয়।

একটি <div> এলিমেন্টের চারটি পাশের জন্য ভিন্ন ভিন্ন প্যাডিং সেট করুন:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

কোড ছোট করতে, একটি প্রপার্টিতে সব padding প্রপার্টি নির্ধারণ করা সম্ভব।

padding প্রপার্টি হলো নিচের পৃথক padding প্রপার্টিগুলোর একটি শর্টহ্যান্ড প্রপার্টি:

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

তো, এটি এভাবে কাজ করে:

padding প্রপার্টিতে চারটি মান থাকলে:

• padding: 25px 50px 75px 100px;
  • উপরের প্যাডিং 25px
  • ডানের প্যাডিং 50px
  • নিচের প্যাডিং 75px
  • বামের প্যাডিং 100px

চারটি মানসহ padding শর্টহ্যান্ড প্রপার্টি ব্যবহার করুন:

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

padding প্রপার্টিতে তিনটি মান থাকলে:

• padding: 25px 50px 75px;
  • উপরের প্যাডিং 25px
  • ডান ও বামের প্যাডিং 50px
  • নিচের প্যাডিং 75px

তিনটি মানসহ padding শর্টহ্যান্ড প্রপার্টি ব্যবহার করুন:

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

padding প্রপার্টিতে দুটি মান থাকলে:

• padding: 25px 50px;
  • উপর ও নিচের প্যাডিং 25px
  • ডান ও বামের প্যাডিং 50px

দুটি মানসহ padding শর্টহ্যান্ড প্রপার্টি ব্যবহার করুন:

div {
  padding: 25px 50px;
}

padding প্রপার্টিতে একটি মান থাকলে:

• padding: 25px;
  • চারটি প্যাডিংই 25px

একটি মানসহ padding শর্টহ্যান্ড প্রপার্টি ব্যবহার করুন:

div {
  padding: 25px;
}

CSS-এর width প্রপার্টি এলিমেন্টের কনটেন্ট এরিয়ার প্রস্থ নির্ধারণ করে। কনটেন্ট এরিয়া হলো একটি এলিমেন্টের প্যাডিং, বর্ডার এবং মার্জিনের ভেতরের অংশ (বক্স মডেল)।

তাই, একটি এলিমেন্টের নির্দিষ্ট width থাকলে, সেই এলিমেন্টে যোগ করা প্যাডিং এলিমেন্টের মোট প্রস্থে যোগ হবে। এটি প্রায়ই অনাকাঙ্ক্ষিত ফলাফল দেয়।

এখানে, <div> এলিমেন্টকে 300px width দেওয়া হয়েছে। তবে, <div> এলিমেন্টের প্রকৃত প্রস্থ হবে 350px (300px + বামের 25px প্যাডিং + ডানের 25px প্যাডিং):

div {
  width: 300px;
  padding: 25px;
}

প্যাডিংয়ের পরিমাণ যাই হোক না কেন, width 300px রাখতে, আপনি box-sizing প্রপার্টি ব্যবহার করতে পারেন। এর ফলে এলিমেন্টটি তার প্রস্থ বজায় রাখে; আপনি প্যাডিং বাড়ালে, উপলব্ধ কনটেন্ট জায়গা কমে যাবে।

প্যাডিংয়ের পরিমাণ যাই হোক না কেন, width 300px রাখতে box-sizing প্রপার্টি ব্যবহার করুন:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}