CSS scroll-padding-block প্রতিশব্দ

পরিভাষা ও ব্যবহার

scroll-padding-block এই অ্যাট্রিবিউটটি ব্লক দিশাতে, কনটেনার থেকে সাব-ইলেকট্রনের অ্যাটচ স্থানের দূরত্ব নির্দিষ্ট করে

যার মানে, আপনি সরকারকে বন্ধ করেছেন তখন, সরকারকে দ্রুতগতিতে সমায়োজিত হবে, এবং ব্লক দিশাতে, অ্যাটচ স্থান এবং কনটেনারের মধ্যে নির্দিষ্ট দূরত্বে স্থান পাবে

ব্লক দিশা হল যেখানে বর্তমান লাইনের অবস্থানের প্রতি পরবর্তী লাইনটি স্থাপন করা হয়, যা CSS display: block; ট্যাগ (যেমন <p> এবং <div> ট্যাগ) পেজের উপর কিভাবে সাজানো হয়, এটা লিখন ভাষার উপর নির্ভর করে, যেমন, মঙ্গোলিয়ানের ক্ষেত্রে নতুন লাইন ডান থেকে বামে সাজানো হয়, তাই ব্লক দিশাও ডান থেকে বামে, আংলো পেজের ক্ষেত্রে নিচের ব্লক দিশা রয়েছে writing-mode পরিভাষা করা হয়

অ্যাটচ স্থানটি হল যখন আপনি সরকারকে বন্ধ করেছেন, সাব-ইলেকট্রনটি কনটেনারের মধ্যে অ্যাটচ করা হয়েছে এমন স্থান

মন্তব্য:এই অ্যাট্রিবিউটটি শুধুমাত্র ব্লক দিশাতেপরিবর্তন করা হয় এবং পিতৃতৃতীয় এলাকায় নির্দিষ্ট করা হয় যখন অ্যাট্রিবিউটটি 'start' বা 'end' হলে কার্যকর

scroll-padding-block এই অ্যাট্রিবিউটটি নিম্নলিখিত অ্যাট্রিবিউটগুলির সংক্ষিপ্ত ফর্ম

• scroll-padding-block-start
• scroll-padding-block-end

scroll-padding-block অ্যাট্রিবিউটের মান বিভিন্ন পদ্ধতিতে সেট করা যেতে পারে:

যদি scroll-padding-block অ্যাট্রিবিউটকে দুটি মান থাকে:

scroll-padding-block: 10px 50px;

• শুরুর দূরত্ব 10px
• শেষের দূরত্ব 50px

যদি scroll-padding-block অ্যাট্রিবিউটকে একটি মান থাকে:

scroll-padding-block: 10px;

• শুরু এবং শেষের দূরত্ব 10px

দেখার জন্য scroll-padding-block অ্যাট্রিবিউটের প্রভাব, সাব-ইলেকট্রনের উপর সেট করা উচিত পরিবর্তন করা হয় এবং পিতৃতৃতীয় এলাকায় নির্দিষ্ট করা হয় বৈশিষ্ট্য scroll-padding-block এবং scroll-snap-type বৈশিষ্ট্য

CSS-এর scroll-padding-block এবং scroll-padding-inline বৈশিষ্ট্যটি সাধারণ সিএসএস বৈশিষ্ট্য CSS scroll-padding-top প্রতিশব্দ、scroll-padding-bottom、scroll-padding-left এবং scroll-padding-right খুবই অনুরূপ, কিন্তু scroll-padding-block এবং scroll-padding-inline বৈশিষ্ট্যটি ব্লক দিক এবং লাইন দিকের উপর নির্ভর করে。

প্রতিমান

উদাহরণ 1

ব্লক দিকে, স্ক্রোল অভ্যন্তরীণ পাঠাইয়ান্ড পরিধি কনটেনার থেকে স্থায়ী স্থান পর্যন্ত 20px করে নির্দিষ্ট করা হয়:

div {
  scroll-padding-block: 20px;
}

আপনার নিজেই প্রয়াস করুন

উদাহরণ 2: চিত্রভাণ্ডার

scroll-padding-block বৈশিষ্ট্যটি সংবলিত চিত্রপটালীতে ব্যবহার করা যেতে পারে, যাতে চিত্রগুলিকে স্থায়ী এলাকার নীচে প্রস্থাপিত করা যায়:

#container {
  scroll-padding-block: 30px 0;
}

আপনার নিজেই প্রয়াস করুন

উদাহরণ 3

যখন কনটেনার এলাকার writing-mode বৈশিষ্ট্যমানটি তালিকাভুক্ত হলে, ব্লক দিকের কনটেনার এবং সাব-এলাকার ভাব উপরের থেকে ডানদিকে এবং নীচের থেকে সম্ভাগতদিকে স্থানান্তরিত হয়, যার ফলে স্ক্রোল আটকন আচরণ এবং scroll-padding-block বৈশিষ্ট্যটির কাজকর্ম:

#container {
  scroll-padding-block: 20px 0;
  writing-mode: vertical-rl;
}

আপনার নিজেই প্রয়াস করুন

CSS বৈচিত্র্যকেন্দ্রিক

scroll-padding-block: auto|value|initial|inherit;

বৈশিষ্ট্যমান

প্রযুক্তিগত বিবরণ

ব্রাউজার সমর্থন

টেবিলের সংখ্যা এটি প্রথমবারের মতো এই বৈশিষ্ট্যটি সম্পূর্ণরূপে সমর্থনকারী ব্রাউজারের সংস্করণটির জন্য দেখায়。

সংশ্লিষ্ট পৃষ্ঠা

উল্লেখ:CSS scroll-padding-block-end প্রতিশব্দ

উল্লেখ:CSS scroll-padding-block-start প্রতিশব্দ

উল্লেখ:CSS scroll-snap-align প্রতিশব্দ

উল্লেখ:CSS scroll-snap-type প্রতিশব্দ

উল্লেখ:CSS writing-mode এসপ্যাট্রি