কিভাবে CSS প্যাডিং প্রপার্টি ব্যবহার করবেন

কিভাবে CSS প্যাডিং ব্যবহার করতে হয় তা জানুন সম্পত্তি।

CSS padding সম্পত্তি ভিতরে স্থানের পরিমাণ নিয়ন্ত্রণ করতে ব্যবহৃত হয় এর বিষয়বস্তু এবং সীমানার মধ্যে HTML উপাদান।

padding CSS margin এর সাথে প্রায়ই বিভ্রান্ত হয় সম্পত্তি, যা বাইরে স্থান যোগ করে একটি উপাদানের সীমানা (কী padding এর বিপরীত করে)।

CSS প্যাডিং বেসিক

এখানে একটি টেক্সট লেবেল সহ একটি বোতাম উপাদান রয়েছে (এর বিষয়বস্তু):

<button>Button</button>

আসুন বোতামটিকে 24px এর একটি প্যাডিং মান দিন:

button { 
    padding: 24px;
}

ফলাফল:

আপনি যদি প্যাডিং মান পরিবর্তন করে 0 করেন আপনি এটি পাবেন:

CSS-এ পাঁচটি ভিন্ন প্যাডিং বৈশিষ্ট্য রয়েছে:

• padding-top
• padding-right
• padding-bottom
• padding-left
• padding (আমরা এইমাত্র ব্যবহার করেছি)

প্রথম চারটি প্যাডিং বৈশিষ্ট্য (-টপ, -ডান, -নিচ, -বাম) হল স্বতন্ত্র, একক-দিক বৈশিষ্ট্য যা শুধুমাত্র একপাশে প্যাডিং যোগ করতে পারে।

শেষটি, padding , একটি তথাকথিত শর্টহ্যান্ড সম্পত্তি, এবং এটি পাঁচটি প্যাডিং বৈশিষ্ট্যের মধ্যে সবচেয়ে নমনীয় এবং সর্বাধিক ব্যবহৃত।

আসুন padding অন্বেষণ করি সম্পত্তি একটু বেশি।

প্যাডিং শর্টহ্যান্ড কিভাবে ব্যবহার করবেন

শর্টহ্যান্ড padding প্রপার্টি (এখন পর্যন্ত আমরা একমাত্র ব্যবহার করেছি) একই সাথে একাধিক প্যাডিং মান যোগ করতে পারে (এক, দুই, তিন বা চারটি মান)।

আসুন কিছু উদাহরণ দেখি।

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

আগে 24px প্যাডিং বোতামের উদাহরণে, আপনি এটি আপনার CSS এ করতে পারতেন:

button {
    padding-top: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
    padding-left: 24px;
}

কিন্তু এটি একটি সময় নষ্ট যখন আপনি একটি মান ব্যবহার করে একবারে চারটি দিকে লক্ষ্য করতে পারেন প্যাডিং শর্টহ্যান্ড:

button { 
    padding: 24px;
}

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

আপনি যদি শুধুমাত্র উপরের এবং নীচে 16px প্যাডিং যোগ করতে চান তবে বাম এবং ডান দিকে 24px প্যাডিং যোগ করতে চান?

আপনি এটি করতে পারেন (সময় সাপেক্ষ উপায়):

button {
    padding-top: 16px; 
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 24px; 
}

অথবা আপনার ভাল বন্ধু, দুটি মান padding ব্যবহার করুন সংক্ষেপে:

button {
    padding: 16px 24px;
}

আপনি যখন padding ব্যবহার করেন দুই সহ সম্পত্তি উপরের মত মান:

• প্রথম মানটি উপরের এবং নীচের উভয় প্যাডিংকে লক্ষ্য করে
• দ্বিতীয় মানটি বাম এবং ডান প্যাডিং উভয়কেই লক্ষ্য করে

ফলাফলঃ

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

আপনি যখন padding ব্যবহার করেন তিন সহ সম্পত্তি মান, যেমন:

button {
    padding: 12px 24px 8px;
}

• প্রথম মান হল টপ প্যাডিং
• দ্বিতীয় মান হল উভয় বাম এবং ডান প্যাডিং
• তৃতীয় মান হল নিচের প্যাডিং

ফলাফল:

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

আপনি যখন padding ব্যবহার করেন চার সহ সম্পত্তি মান, যেমন:

button {
    padding: 12px 16px 12px 16px;
}

• প্রথম মান হল টপ প্যাডিং
• দ্বিতীয় মান হল ডান প্যাডিং
• তৃতীয় মান হল নিচের প্যাডিং
• চতুর্থ মান হল বাম প্যাডিং

কখন একক-দিক প্যাডিং বৈশিষ্ট্য ব্যবহার করবেন?

শর্টহ্যান্ড padding নমনীয়তা এবং দক্ষতার পরিপ্রেক্ষিতে সম্পত্তি একক-দিক প্যাডিং বৈশিষ্ট্যগুলিকে লাথি দেয়।

তাহলে কেন আপনি উদাহরণস্বরূপ ব্যবহার করবেন:

padding-left: 24px;

আপনি যদি একই ফলাফল পেতে নীচের শর্টহ্যান্ড ব্যবহার করতে পারেন?

padding: 0 0 0 24px; /* top: 0, right: 0, bottom: 0, left: 24px */

একক-দিক প্যাডিং বৈশিষ্ট্যগুলি ব্যবহার করার প্রধান কারণ যে কোনও কারণে যদি আপনি শুধুমাত্র একটি উপাদানের একপাশে নির্দিষ্ট প্যাডিং যোগ করতে চান এবং অন্য তিনটি পক্ষের প্যাডিং মানগুলি তাদের ডিফল্ট/বর্তমান প্যাডিং মান যাই হোক না কেন (যা নির্ভর করে) আপনার সেটআপে)।

যাইহোক, ধরা যাক যে আপনি শুধুমাত্র একটি উপাদানের বাম দিকে প্যাডিং চান, কিন্তু উপরের, ডানে, নীচে শূন্য প্যাডিং চান। একক-দিক প্যাডিং বৈশিষ্ট্যগুলি ব্যবহার করে এটি করতে, আপনার কোডটি এইভাবে লিখতে হবে যাতে উপরের, ডান এবং নীচে বিদ্যমান প্যাডিং মানগুলি ওভাররাইড করা হয়:

padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 24px

এখন উপরেরটি এমন কিছুর জন্য একটি ভয়ঙ্কর পরিমাণ কোড যা শর্টহ্যান্ড প্যাডিং বৈশিষ্ট্য ব্যবহার করে এক লাইনে লেখা যেতে পারে:

padding: 0 0 0 24px; /* top, right, bottom, left */

এই ডিফল্ট/বর্তমান প্যাডিং মানগুলি কী যা আমি বলছি?

আমি স্টাইলগুলি উল্লেখ করছি যেগুলি হয় উত্তরাধিকার সূত্রে প্রাপ্ত:

• ইউজার এজেন্ট স্টাইলশীট
• একটি CSS লাইব্রেরি বা ফ্রেমওয়ার্ক
• অথবা আপনার CSS স্টাইলশীটের শীর্ষে আপনার দ্বারা যোগ করা অন্য কোনো শৈলী ঘোষণা (মনে রাখবেন, CSS ক্যাসকেড)।

ইউজার এজেন্ট স্টাইলশীট (UAS) একটি ন্যূনতম CSS স্টাইলশীট যা সমস্ত ব্রাউজারে অন্তর্নির্মিত রয়েছে। এটি নিশ্চিত করার জন্য যে আপনি নিজে থেকে আপনার ওয়েবসাইটে কোনো CSS যোগ না করলেও, আপনার বিষয়বস্তুকে শেষ-ব্যবহারকারীর কাছে পঠনযোগ্য করে তুলতে যথেষ্ট স্টাইলিং/ফরম্যাটিং থাকবে।

উদাহরণস্বরূপ, যদি আপনার বোতাম এলিমেন্টের বর্তমান প্যাডিংটি এরকম দেখায় (যেখান থেকে আসে তা নির্বিশেষে):

button {
    padding-top: 16px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 16px
}

এবং আপনি একটি বোতাম ক্লাস তৈরি করুন যা শুধুমাত্র প্যাডিং শীর্ষ মানকে সম্বোধন করে:

.button-login {
    padding-top: 40px;
}

এবং এটি একটি বোতাম উপাদান যোগ করুন:

<button class="button-login">Login</Button>

তাহলে আপনার লগইন বোতামটি এরকম দেখাবে:

কারণ আবার, ডান, নীচে এবং বাম প্যাডিং মানগুলি অন্য কোথাও থেকে উত্তরাধিকার সূত্রে প্রাপ্ত।

আপনি সম্ভবত কল্পনা করতে পারেন, একক-দিক প্যাডিং বৈশিষ্ট্যগুলি ব্যবহার করে আপনার নির্দিষ্ট CSS কোডবেস কতটা সংগঠিত তার উপর নির্ভর করে বিভ্রান্তি বা অপ্রত্যাশিত ফলাফল হতে পারে।

আমি খুব কমই একক দিক প্যাডিং বৈশিষ্ট্য ব্যবহার করুন, কারণ প্রতিটি নতুন প্রকল্পের শুরুতে আমি আমার প্যাডিং মান শূন্যে রিসেট করি এবং তারপর আমার প্রকল্পের স্পেসিং স্কেলের উপর ভিত্তি করে আমার UI উপাদানগুলিতে (HTML উপাদান) প্যাডিং মান যুক্ত করি।

এটি আমার কর্মপ্রবাহকে আরও অনুমানযোগ্য করে তোলে কারণ আমাকে X ব্রাউজারের ব্যবহারকারী এজেন্ট স্টাইলশীট দ্বারা পাস করা বিভিন্ন স্টাইল সম্পর্কে চিন্তা করতে হবে না।

উপরে উল্লিখিত সমস্ত কারণে, শর্টহ্যান্ড padding ব্যবহার করা সামগ্রিকভাবে আরও বেশি ব্যবহারিক প্যাডিং মান সংজ্ঞায়িত করার পদ্ধতি — বেশিরভাগ সময়।

সন্দেহ হলে, প্যাডিং শর্টহ্যান্ড ব্যবহার করুন।

প্যাডিং শর্টহ্যান্ডগুলি কীভাবে মনে রাখবেন

চারটি মানের সংক্ষেপে মনে রাখা সবচেয়ে সহজ কারণ মানগুলি ঘড়ির কাঁটার দিকে: যোগ করা হয় উপরে, ডান, নীচে, বাম।

দুই এবং তিন মান সংক্ষেপে কম স্পষ্ট:

• দুটি মান শর্টহ্যান্ড:16px 8px (উপর-নীচ, বাম-ডান)
• তিনটি মান সংক্ষেপে:8px 16px 4px (উপরে, বাম-ডান, নীচে)

দ্রষ্টব্য: অনুশীলনে, আপনাকে খুব কমই তিনটি মান সংক্ষিপ্ত হ্যান্ড ব্যবহার করতে হবে, যা আমার কাছে মনে রাখার মতো নয় (অন্য কিছুর জন্য আপনার মস্তিষ্কের ক্ষমতা ব্যবহার করুন)। আপনি এটি ব্যবহার করার প্রয়োজন হলে এটি দেখুন.

গ্রহণযোগ্য প্যাডিং দৈর্ঘ্য ইউনিট

padding বৈশিষ্ট্য সব ধরনের দৈর্ঘ্যের একক গ্রহণ করে। সবচেয়ে সাধারণ দৈর্ঘ্যের একক হল, px , rem , em , % , vw , vh , inherit .

দ্রষ্টব্য: আমি পিক্সেল ইউনিট px ব্যবহার করেছি এই টিউটোরিয়ালে কারণ এটি নতুনদের জন্য একটি আরও সম্পর্কিত ইউনিট টাইপ (যা আমি আপনার বেশিরভাগই মনে করি)। এটি বিশেষভাবে সত্য যদি আপনি ইলাস্ট্রেটর, স্কেচ, ফিগমা ইত্যাদি ব্যবহার করে একটি ভিজ্যুয়াল ডিজাইনের পটভূমি থেকে আসেন।

যাইহোক, পিক্সেল হল পরম একক যেগুলির নির্দিষ্ট দৈর্ঘ্য আছে, তাই তারা ভালভাবে মাপতে পারে না।

আপেক্ষিক ইউনিট, যেমন উপরে উল্লিখিত rem , em , % , vw , vh , স্কেলিং এ চমৎকার, কিন্তু তারা প্রত্যেকে বিভিন্ন উপায়ে এটি সম্পর্কে যান।

আমি বেশিরভাগ ক্ষেত্রে rem ব্যবহার করুন আমার প্যাডিং মানগুলির জন্য, কিন্তু এই দিন এবং যুগে এটি মূলত পছন্দের বিষয় যেখানে সমস্ত আধুনিক ব্রাউজার সমস্ত ইউনিট প্রকার প্রক্রিয়া করতে পারে৷

পারফর্মেন্স অপ্টিমাইজেশান (ঐচ্ছিক পড়া)

আপনারা যারা পারফরম্যান্স অপ্টিমাইজেশান ব্যাকগ্রাউন্ড থেকে এসেছেন, আমি জানি আপনি কী ভাবছেন:

"প্যাডিং শর্টহ্যান্ড ব্যবহার করার পারফরম্যান্সের পার্থক্য/খরচ কি একক দিকনির্দেশের মান ব্যবহার করার বিপরীতে আছে?"

উত্তর হল হ্যাঁ৷৷ যাইহোক, নীচের দুটি উদাহরণের মধ্যে কোনটি সামগ্রিকভাবে সবচেয়ে কার্যকর তা অনুমান করা সীমারেখা অসম্ভব:

padding: 8px 12px 16px 20px;

padding-top: 8px;
padding-right: 12px;
padding-bottom: 16px;
padding-left: 20px;

আপনি হয়তো ভাবতে পারেন যে শর্টহ্যান্ড হল সবচেয়ে কার্যকরী বিকল্প, কারণ এতে প্রক্রিয়া করার জন্য কম বাইট (ডেটা) আছে।

যাইহোক, এটি সবই নির্ভর করে কোড প্রসেসিং (পার্সিং, মিনিফায়িং, কম্পাইলিং) এর পরিপ্রেক্ষিতে ডেভেলপমেন্ট এবং প্রোডাকশনের মধ্যে কী ঘটবে এবং কীভাবে আপনার প্রোজেক্ট কনফিগার ও সংগঠিত হয়।

যেকোনো সম্ভাব্য পার্থক্য এতটাই ক্ষুদ্র যে এটি নিয়ে উদ্বিগ্ন হওয়ার মতো নয়। আপনাকে আপনার যুদ্ধগুলিকে বিজ্ঞতার সাথে বাছাই করতে হবে, এবং যখন পারফরম্যান্সের কথা আসে, তখন আপনি প্যাডিং বৈশিষ্ট্যের তুলনায় ভাজার জন্য অনেক বড় মাছ পেয়েছেন।