CSS প্যাডিং(CSS Padding) [বাংলায় CSS মাস্টার ক্লাস]: CSS একটি উপাদানের প্রতিটি পাশের জন্য প্যাডিং বৈশিষ্ট্য প্রদান করে: প্যাডিং-টপ, প্যাডিং-ডান, প্যাডিং-নিচ এবং প্যাডিং-বাম। এই বৈশিষ্ট্যগুলি বিকাশকারীদের স্বাধীনভাবে পৃথক পক্ষের জন্য প্যাডিং সেট করার অনুমতি দেয়, একটি উপাদানের বিষয়বস্তু এলাকায় সূক্ষ্ম-সুরক্ষিত নিয়ন্ত্রণ প্রদান করে।
- padding-top
- padding-right
- padding-bottom
- padding-left
ওয়েব ডিজাইনের ক্ষেত্রে, সূক্ষ্মতা এবং নান্দনিকতা দৃশ্যত মনোমুগ্ধকর এবং ব্যবহারকারী-বান্ধব ওয়েবসাইটগুলি তৈরি করার মূল চাবিকাঠি ধরে রাখে। CSS (ক্যাসকেডিং স্টাইল শীট) একটি শক্তিশালী টুল যা ওয়েব ডেভেলপারদের ওয়েব উপাদানগুলির বিন্যাস, ব্যবধান এবং চেহারা নিয়ন্ত্রণ করতে সক্ষম করে। এই নিয়ন্ত্রণের কেন্দ্রবিন্দুতে রয়েছে CSS প্যাডিং, একটি মৌলিক সম্পত্তি যা একটি ওয়েবপৃষ্ঠার বিষয়বস্তু এবং ভিজ্যুয়াল উপস্থাপনাকে আকার দেয়। একটি উপাদানের বিষয়বস্তু এবং এর সীমানার মধ্যে পর্যাপ্ত ব্যবধান স্থাপনে প্যাডিং একটি গুরুত্বপূর্ণ ভূমিকা পালন করে। এই ব্যবধানটি পঠনযোগ্যতা বাড়ায় এবং নিশ্চিত করে যে বিষয়বস্তু সঙ্কুচিত বা বিশৃঙ্খল বোধ না করে, একটি ভাল ব্যবহারকারীর অভিজ্ঞতায় অবদান রাখে।
প্যাডিং প্রতিক্রিয়াশীল ওয়েব ডিজাইনের অবিচ্ছেদ্য অংশ। প্যাডিং মানগুলির জন্য শতাংশ বা ইএমএসের মতো আপেক্ষিক ইউনিটগুলি ব্যবহার করা লেআউটগুলিকে বিভিন্ন স্ক্রীনের আকার এবং অভিযোজনগুলির সাথে নির্বিঘ্নে মানিয়ে নিতে দেয়৷ এটি নিশ্চিত করে যে আপনার ডিজাইনটি বিস্তৃত ডিভাইস জুড়ে দৃশ্যত আকর্ষণীয় থাকবে। অনন্য লেআউট এবং ভিজ্যুয়াল এফেক্ট ডিজাইন করতে প্যাডিং সৃজনশীলভাবে নিযুক্ত করা যেতে পারে। নেতিবাচক প্যাডিং, উদাহরণস্বরূপ, উপাদানগুলিকে ওভারল্যাপ করতে পারে বা স্থান কমাতে পারে, যা উদ্ভাবনী এবং শৈল্পিক ওয়েব ডিজাইনের অনুমতি দেয়।
CSS প্যাডিং(CSS Padding) সম্পর্কে বিস্তারিত নিচে দেওয়া হল।
Example:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS MASTER JHUTANDA</title>
<!--https://jhutanda.com-->
<!--https://github.com/jhutanda-->
</head>
<body>
<p><button class="b1">Button1</button></p>
<p><button class="b2">Button2</button></p>
<p><button class="b3">Button3</button></p>
<p><button class="b4">Button4</button></p>
<p><button class="b5">Button5</button></p>
<p><button class="b6">Button6</button></p>
<!-- css style -->
<style>
p {
background-color: aqua;
}
/* padding 10px */
.b1 {
padding: 10px;
}
/* padding top, right, bottom, left */
.b2 {
padding-top: 10px;
padding-right: 5px;
padding-bottom: 50px;
padding-left: 100px;
}
/* all padding in one line - top, right, bottom, left*/
.b3 {
padding: 50px 10px 30px 50px;
}
/* padding in two dimention top-bottom, left-right */
.b4 {
padding: 20px 50px;
}
/* padding "0 px" */
.b5 {
padding: 0 0 0 100px;
}
.b6 {
padding: 50px 0 0 150px;
}
</style>
</body>
</html>