প্যাডিং হচ্ছে এইচটিএমএল এলিমেন্টের বর্ডার এবং কনটেন্টের মাঝখানের দুরত্ব। যেকোন একটা এইচটিএমএল এলিমেন্টে সিএসএস দিয়ে বর্ডার দিন এবার সেখানে প্যাডিং দিন তাহলে স্পষ্ট দেখতে/বুঝতে পারবেন যে প্যাডিং দিলে কোথায় ফাকা বা স্পেস বাড়ে। যেমন
border : 2px solid #fff;
padding : 5px;
প্রয়োগ দেখুন
padding : 5px; দেয়াতে এলিমেন্টের চারিদিকে ৫ পিক্সেল করে স্পেস হবে। শুধু একদিকে বা কয়েক দিকেও প্যাডিং দেয়া যায়। যেমন
padding-top : 5px;
padding-bottom: 5px;
padding-right: 5px;
padding-left: 5px;
এভাবে চারবার লেখার কাজ একবারে করা যায়, এটাকে শর্টহ্যান্ড প্রোপার্টি বলে যেমন।
padding : 5px;
অথবা
padding : 5px 6px 2px 4px;
এখানে ঘরির কাটার মত করে হিসেব করে বের করতে হয় যেমন উপরে ৫ পিক্সেল এরপর ডানে ৬ পিক্সেল তারপর নিচে ২ এবং সবশেষে বামে ৪ পিক্সেল।
** padding এর মান পিক্সেল (px), em বা % দিয়ে দেয়া যাবে।
** যদি padding এর মান ২টি দেয়া হয় তবে প্রথমটি উপরে নিচে এবং পরের মানটি ডানে বামের জন্য হয়ে যাবে। যেমন
padding : 10px 4px; হলে উপরে নিচে ১০ পিক্সেল এবং ডানে বামে ৪ পিক্সেল করে প্যাডিং হবে।
** ৩ টি মান দিলে প্রথমটি উপরে এরপরেরটি ডানে বামে এবং শেষেরটি নিচের প্যাডিং হিসেবে নিবে।
width এর সাথে padding যোগ হয়:
যেমন কোন এলিমেন্টের width : 100px; আছে এবং এখানে padding : 10px; আছে, তাহলে শেষ পর্যন্ত এলিমেন্টের width হয়ে যাবে ১২০ পিক্সেল। এই সমস্যার জন্য যদি box-sizing : border-box; ব্যবহার করেন তবে আসল width ফেরত আসবে।
প্রয়োগ দেখুন
এখানে দেখবেন width এর সাথে কিভাবে প্যাডিং যোগ হয়ে যায় আবার box-sizing প্রোপার্টি ব্যবহার করে দেখুন সমাধান হয়ে যাবে।
মার্জিন (Margin)
==============================
মার্জিন দিয়ে এলিমেন্টের বাইরে (বর্ডারের বাইরে) দুরত্ব বা স্পেস তৈরী করা যায়। মান দেয়ার নিয়ম padding এর মতই শুধু এখানে অতিরিক্ত একটা মান auto দেয়া যায়।
প্রয়োগ দেখুন
কোথাও মান auto দিলে ব্রাউজার হিসেব করে একটা মান নিয়ে নেয়।
** কোন এলিমেন্টকে যদি div এর মাঝে আনতে হয় তবে সেখানে দুটি প্রোপার্টিজ দিয়ে করা যায়। মার্জিন margin : 0 auto; দেন এবং width নির্দিষ্ট করে দেন। সেটার parent div এর ঠিক মাঝামাঝি চলে আসবে (আড়াঅাড়ি ভাবে)। যদি কোন div এর ভিতর না থাকে তবে ব্রাউজারের মাঝে চলে আসবে।
** প্যাডিং এর মত এখানে width যোগ হয়না।
