সিএসএস প্যাডিং এবং মার্জিন টিউটোরিয়াল

প্যাডিং হচ্ছে এইচটিএমএল এলিমেন্টের বর্ডার এবং কনটেন্টের মাঝখানের দুরত্ব। যেকোন একটা এইচটিএমএল এলিমেন্টে সিএসএস দিয়ে বর্ডার দিন এবার সেখানে প্যাডিং দিন তাহলে স্পষ্ট দেখতে/বুঝতে পারবেন যে প্যাডিং দিলে কোথায় ফাকা বা স্পেস বাড়ে। যেমন

border : 2px solid #fff;
padding : 5px;

প্রয়োগ দেখুন

<!DOCTYPE html>
<html>
<head>
<style>
h1{
border: 2px solid #f00;
padding:5px;
}
</style>
</head>
<body>
<h1>Padding tutorial in Jitubd</h1>

</body>
</html>

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 ফেরত আসবে।

প্রয়োগ দেখুন

<!DOCTYPE html>
<html>
<head>
<style>
h1{
border: 2px solid #f00;
padding:15px;
width: 300px;
}
</style>
</head>
<body>
<h1>Padding tutorial in Jitubd</h1>
</body>
</html>

এখানে দেখবেন width এর সাথে কিভাবে প্যাডিং যোগ হয়ে যায় আবার box-sizing প্রোপার্টি ব্যবহার করে দেখুন সমাধান হয়ে যাবে।

মার্জিন (Margin)==============================মার্জিন দিয়ে এলিমেন্টের বাইরে (বর্ডারের বাইরে) দুরত্ব বা স্পেস তৈরী করা যায়। মান দেয়ার নিয়ম padding এর মতই শুধু এখানে অতিরিক্ত একটা মান auto দেয়া যায়।
প্রয়োগ দেখুন<!DOCTYPE html>
<html>
<head>
<style>
h1{
border: 2px solid #f00;
margin:15px 30px;
}
</style>
</head>
<body>
<h1>margin tutorial in Jitubd</h1>

</body>
</html>

কোথাও মান auto দিলে ব্রাউজার হিসেব করে একটা মান নিয়ে নেয়।

** কোন এলিমেন্টকে যদি div এর মাঝে আনতে হয় তবে সেখানে দুটি প্রোপার্টিজ দিয়ে করা যায়। মার্জিন margin : 0 auto; দেন এবং width নির্দিষ্ট করে দেন। সেটার parent div এর ঠিক মাঝামাঝি চলে আসবে (আড়াঅাড়ি ভাবে)। যদি কোন div এর ভিতর না থাকে তবে ব্রাউজারের মাঝে চলে আসবে।

** প্যাডিং এর মত এখানে width যোগ হয়না।