সিএসএস প্যাডিং - Css Padding



কোন এলিমেন্টের বর্ডার এবং এলিমেনট কন্টেন্টের মধ্যকার ফাঁকা স্থান নির্ধারণ করতে সিএসএস প্যাডিং প্রোপার্টি ব্যবহার করা হয়।


সিএসএস প্যাডিং

সিএসএস প্যাডিং সুনির্ধারিতভাবে নির্দিষ্ট করে দেয় কোন কন্টেন্টের চারপাশের (বর্ডারের ভেতর) ফাঁকা স্থান। সিএসএস প্যাডিং প্রপার্টি এলিমেনটের ব্যাকগ্রাউন্ড কালার দ্বারা প্রভাবিত হয়।

আলাদা আলাদাভাবে প্যাডিং প্রপার্টি ব্যবহার করে ওপরে(Top), ডানে(Right), বামে(Left) এবং নিচে(Bottom) প্যাডিং নির্দিষ্ট করে দেয়া যায়। আবার এক সাথে একটি শর্টহ্যান্ড প্যাডিং প্রপার্টি ব্যবহার করেও প্যাডিং নির্ধারণ করা যায়।


মান বা Value

প্যাডিং নির্ধারণ করতে ২ ধরণের মান (Value) ব্যবহার করা যায়।

মান বর্ণনা
length নির্দিষ্ট মানেরে প্যাডিং নির্ধারণ করার জন্য px, pt, cm ইত্যাদি ব্যবহার করা হয়। যদি কোন মান উল্লেখ না করা হয়, তবে স্বয়ংক্রিয়ভাবে মান 0px হবে।
% কোন এলিমেনটের প্রস্থ অনুযায়ী শতকরা অনুপাতে প্যাডিং নির্দিষ্ট করার জন্য এই পদ্ধতি ব্যবহার করা হয়। যেমন- ১০%, ১৫% ইত্যাদি।


বিভিন্ন মানের প্যাডিং

সিএসএস দ্বারা একই এলিমেনটের বিভিন্ন দিকে বিভিন্ন মানের প্যাডিং নির্ধারণ করা যায়।
নিচে এই পদ্ধতির কোড দেয়া হল -

কোড দেখুন

padding-top:20px;
padding-bottom:30px;
padding-right:40px;
padding-left:50px;




শর্টহ্যান্ড প্যাডিং প্রপার্টি

সংক্ষেপে সিএসএস কোড লেখার জন্য শর্টহ্যান্ড প্যাডিং প্রপার্টি ব্যবহার করা যায়। অর্থাৎ left, right, top এবং bottom padding প্রপার্টি শুধুমাত্র একটি সিএসএস প্রপার্টির মাধ্যমেই নির্ধারণ করা যায়।

শর্টহ্যান্ড প্রপার্টি ৪ ভাবে লেখা যায় -

১ম পদ্ধতি -

কোড দেখুন

padding:20px;


এভাবে কোড লিখলে এলিমেনটের চারপাশেই অর্থাৎ left, right, top এবং bottom এ 20px প্যাডিং তৈরি হবে।

২য় পদ্ধতি -

কোড দেখুন

padding:20px 30px;


এভাবে কোড লেখার ফলে প্রথম valu এর জন্য top ও bottom এ 20px এবং দ্বিতীয় valu এর জন্য left ও right এ 30px এর প্যাডিং তৈরি হবে।

৩য় পদ্ধতি -

কোড দেখুন

padding:20px 30px 40px;


এভাবে কোড লেখার ফলে প্রথম valu এর জন্য top এ 20px, দ্বিতীয় valu এর জন্য left ও right এ 30px এবং ৩য় valu এর জন্য bottom এ 40px এর প্যাডিং তৈরি হবে।

৪র্থ পদ্ধতি -

কোড দেখুন

padding:20px 30px 40px 50px;


এভাবে কোড লেখার ফলে প্রথম valu এর জন্য top এ 20px, দ্বিতীয় valu এর জন্য right এ 30px, ৩য় valu এর জন্য bottom এ 40px এবং left এ 50px এর প্যাডিং তৈরি হবে।


সিএসএসের সকল প্যাডিং প্রপার্টি

প্রপার্টি বর্ণনা
padding কোন এলিমেনটের right padding বা ডান দিকের ফাঁকা স্থান নির্দিষ্ট করে।
padding-top কোন এলিমেনটের top padding বা উপর দিকের ফাঁকা স্থান নির্দিষ্ট করে।
padding-bottom কোন এলিমেনটের bottom padding বা নিচ দিকের ফাঁকা স্থান নির্দিষ্ট করে।
padding-left কোন এলিমেনটের left padding বা বাম দিকের ফাঁকা স্থান নির্দিষ্ট করে।
padding-right কোন এলিমেনটের right padding বা ডান দিকের ফাঁকা স্থান নির্দিষ্ট করে।







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.