Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

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


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

এটি একটি 30px এর প্যাডিং।



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

সিএসএস এর প্যাডিং প্রোপার্টি গুলো, সুনির্ধারিতভাবে নির্দিষ্ট করে দেয় কোন কন্টেন্টের চারপাশের অর্থাৎ বর্ডারের ভেতর ফাঁকা স্থান। অর্থাৎ সিএসএস প্যাডিং প্রপার্টি এলিমেন্ট ও বর্ডার এর মধ্যবর্তী ফাঁকা স্থান নির্ধারণ করে। প্যাডিং এর পৃষ্ঠদেশ বা background এ কোন রঙ ব্যবহার করা যায় না, এটি পুরোপুরি স্বচ্ছ বা transparent অর্থাৎ অদৃশ্য হয়।

ভিন্ন ভিন্ন প্যাডিং প্রপার্টি গুলো ব্যবহার করে, স্বাধীনভাবে কোন এইচটিএমএল এলিমেন্ট এর চতুর্দিকে প্যাডিং নির্ধারণ করা যায়। প্যাডিং প্রোপার্টি গুলো হল - padding-left, padding-right, padding-top এবং padding-bottom.

সকল প্যাডিং প্রোপার্টি ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

p {
   padding-left: 40px;
   padding-right: 60px;
   padding-top: 80px;
   padding-bottom: 100px;
  }

কোড এডিটর



প্যাডিং প্রোপার্টির মান বা value

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

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

inherit মানটি IE7 এবং এর পূর্ববর্তী সংস্করণ বা verson গুলো সমরথন করে না এবং IE8 এর ক্ষেত্রে একটি !DOCTYPE এর প্রয়োজন হয়।


শর্টহ্যান্ড প্রপার্টি - padding

সিএসএস এর এই padding-left, padding-right, padding-top এবং padding-bordar প্রোপার্টি গুলোর শর্টহ্যান্ড হল padding প্রোপার্টি। একবার মাত্র শর্টহ্যান্ড প্রপার্টি ব্যবহার করে এলিমেন্ট এর সকল দিকের প্যাডিং নির্ধারণ করা যায়।

নিচে সিএসএস এর padding শর্টহ্যান্ড প্রোপার্টির সিনট্যাক্স দেখুন।

সিনট্যাক্স

silector {padding: value;}

কোড এডিটর


সিএসএস এর padding প্রোপার্টি কে মান বা value লেখার ওপর নির্ভর করে চার ভাবে ব্যবহার করা যায়। নিচে এগুলোর বিস্তারিত দেখুন।


padding প্রোপার্টি - 4টি মান বা value

padding প্রোপার্টি তে 4 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে প্রথম মানটি এইচটিএমএল এলিমেন্ট এর ওপর দিকের প্যাডিং, দ্বিতীয় মানটি ডান দিকের প্যাডিং, তৃতীয়টি নিচের দিকের প্যাডিং এবং চতুর্থটি বাঁ দিকের প্যাডিং নির্ধারণ করে।

সিএসএস এর padding শর্টহ্যান্ড প্রোপার্টিতে 4 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

div {
    padding: 40px 60px 80px 100px;
    }

কোড এডিটর



padding প্রোপার্টি - 3টি মান বা value

padding প্রোপার্টি তে 3 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে প্রথম মানটি এইচটিএমএল এলিমেন্ট এর ওপর দিকের প্যাডিং, দ্বিতীয় মানটি ডান ও বাঁ দিকের প্যাডিং এবং তৃতীয়টি নিচের দিকের প্যাডিং নির্ধারণ করে।

সিএসএস এর padding শর্টহ্যান্ড প্রোপার্টিতে 3 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

div {
    padding: 40px 60px 80px;
    }

কোড এডিটর



padding প্রোপার্টি - 2টি মান বা value

padding প্রোপার্টি তে 2 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে প্রথম মানটি এইচটিএমএল এলিমেন্ট এর ওপর ও নিচের দিকের প্যাডিং এবং দ্বিতীয় মানটি ডান ও বাঁ দিকের প্যাডিং নির্ধারণ করে।

সিএসএস এর padding শর্টহ্যান্ড প্রোপার্টিতে 2 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

div {
    padding: 40px 60px;
    }

কোড এডিটর



padding প্রোপার্টি - 1টি মান বা value

padding প্রোপার্টি তে 1 টি মান বা value উল্লেখ করা যায়। এক্ষেত্রে মানটি এইচটিএমএল এলিমেন্ট এর চতুর্দিকের প্যাডিং নির্ধারণ করে।

সিএসএস এর padding শর্টহ্যান্ড প্রোপার্টিতে 1 টি মান বা value ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

div {
    padding: 40px;
    }

কোড এডিটর



inherit মান

padding প্রোপার্টিতে inherit মান বা value ব্যবহার করা হলে তা parent এলিমেন্ট এর মান গ্রহন করে।

inherit মান ব্যবহার করে নিচে একটি উদাহরন দেখুন।

উদাহরণ

div {
    border-left: 2px solid green;
    padding-left: 80px;
    }

p {
   padding-left: inherit;
  }

কোড এডিটর



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

প্রোপার্টিমানবর্ণনা
padding
padding-left
padding-right
padding-top
padding-bottom