CSS প্যাডিং প্রপার্টি ব্যবহার করার পূর্ণ গাইড

CSS padding প্রপার্টি কীভাবে ব্যবহার করবেন তা শিখুন।

CSS padding প্রপার্টি HTML এলিমেন্টের কন্টেন্ট এবং বর্ডারের মাঝপথে থাকা স্পেস কন্ট্রোল করে। এটি প্রায়শই margin প্রপার্টির সাথে গুলিয়ে যাওয়া হয়, যা বর্ডারের বাইরে স্পেস যোগ করে—প্যাডিং-এর ঠিক বিপরীত।

CSS প্যাডিং বেসিকস

একটি বাটন এলিমেন্ট যার টেক্সট লেবেল (কন্টেন্ট):

<button>Button</button>

বাটনকে ২৪পিক্সেল প্যাডিং দিই:

button { padding: 24px; }

প্যাডিং 0 করলে কন্টেন্ট বর্ডারের সাথে আটকে যাবে।

৫টি প্যাডিং প্রপার্টি

• padding-top
• padding-right
• padding-bottom
• padding-left
• padding (শর্টহ্যান্ড—সবচেয়ে ফ্লেক্সিবল এবং জনপ্রিয়)

প্রথম চারটি একক দিকের প্রপার্টি। শেষটি শর্টহ্যান্ড প্রপার্টি যা একসাথে একাধিক মান গ্রহণ করতে পারে।

প্যাডিং শর্টহ্যান্ড কীভাবে ব্যবহার করবেন

শর্টহ্যান্ড padding প্রপার্টি ১, ২, ৩ বা ৪টি মান একসাথে নিতে পারে।

১-মান শর্টহ্যান্ড

button { padding: 24px; }

চारों দিকেই ২৪পিক্সেল প্যাডিং।

২-মান শর্টহ্যান্ড

button { padding: 16px 24px; }

• প্রথম মান (১৬পিক্সেল) → টপ এবং বটম
• দ্বিতীয় মান (২৪পিক্সেল) → লেফ্ট এবং রাইট

৩-মান শর্টহ্যান্ড

button { padding: 12px 24px 8px; }

• প্রথম মান → টপ
• দ্বিতীয় মান → লেফ্ট এবং রাইট (দুইই)
• তৃতীয় মান → বটম

৪-মান শর্টহ্যান্ড (ক্লকওয়াইজ)

button { padding: 12px 16px 12px 16px; }

• ১ম মান → টপ
• ২য় মান → রাইট
• ৩য় মান → বটম
• ৪র্থ মান → লেফ্ট

একক-দিকের প্যাডিং প্রপার্টি কবে ব্যবহার করবেন

শর্টহ্যান্ড বেশি কার্যকর হলেও, কখনো কখনো একক-দিকের প্রপার্টি (যেমন padding-left: 24px) প্রয়োজন হয়—যখন আপনি শুধু একটি নির্দিষ্ট দিকের প্যাডিং পরিবর্তন করতে চান এবং বাকি তিন দিকের বিদ্যমান মান অপরিবর্তিত রাখতে চান।

তবে অধিকাংশ ক্ষেত্রে শর্টহ্যান্ডই ব্যবহার করা ভালো, কারণ এটি কোড ছোট রাখে এবং অপ্রত্যাশিত ইনহেরিটেন্স থেকে বাঁচায়। ইউজার এজেন্ট স্টাইলশিট (UAS) ব্রাউজারের বিল্ট-ইন ডিফল্ট স্টাইল দেয়, যা প্যাডিং konflikten তৈরি করতে পারে। আমি নতুন প্রজেক্টে সব প্যাডিং ০ করে দি, তারপর স্পেসিং স্কেল অনুযায়ী প্যাডিং যোগ করি—এটি ওয়ার্কফ্লো প্রিডিক্টেবল করে।

শর্টহ্যান্ড মনে রাখার টিপস

• ৪-মান: ক্লকওয়াইজ — টপ, রাইট, বটম, লেফ্ট
• ২-মান: 16px 8px (টপ-বটম, লেফ্ট-রাইট)
• ৩-মান: 8px 16px 4px (টপ, লেফ্ট-রাইট, বটম) — বি.দ্র.: ৩-মান শর্টহ্যান্ড কম ব্যবহার হয়, মনে রাখার প্রয়োজন নেই

গ্রহণযোগ্য প্যাডিং দৈর্ঘ্য ইউনিট

px, rem, em, %, vw, vh, inherit সবই ব্যবহার করা যায়। বিগিনারদের জন্য px বোঝা সহজ, কিন্তু এটি অ্যাবসোলিউট ইউনিট—Scalable নয়। রিলেটিভ ইউনিট (rem, em ইত্যাদি) রেসপন্সিভ ডিজাইনের জন্য ভালো। আমি شخصিগতভাবে rem পছন্দ করি।

পারফরম্যান্স অপ্টিমাইজেশন (ঐচ্ছিক)

শর্টহ্যান্ড কি সিঙ্গেল-ডিরেকশন প্রপার্টির চেয়ে ফাস্ট? হ্যাঁ, পারফরম্যান্স পার্থক্য আছে কিন্তু নগণ্য। মিনিফিকেশন, কম্পাইলেশন ইত্যাদির কারণে কোনটি ফাস্ট হবে তা প্রিডিক্ট করা কঠিন। এই বিষয়ে চিন্তা করার চেয়ে বড় পারফরম্যান্স ইস্যুর ওপর ফোকাস করুন।