বক্স মডেল: CSS প্যাডিং
- အရှေ့လွှတ် CSS အဆိုင်များ အစီအစဉ်
- နောက်လွှတ် CSS အကျယ်
এলিমেন্টের অভ্যন্তরীণ প্যাডিং হল বর্তনী এবং কন্টেন্ট এর মধ্যে।এই এলাকা নিয়ন্ত্রণ করার সবচেয়ে সহজ প্রক্রিয়া হল padding এপার্টি।
CSS padding অ্যাট্রিবিউট এলিমেন্টের কাঁচা এবং এলিমেন্টের কন্টেন্টের মধ্যে খালি এলাকা নির্ধারণ করে।
CSS padding အချက်
CSS padding অ্যাট্রিবিউট এলিমেন্টের অভ্যন্তরীণ মাঝারি নির্ধারণ করে।padding অ্যাট্রিবিউটটি দৈর্ঘ্য মাত্রা বা শতকরা মাত্রা গ্রহণ করে, কিন্তু নেগেটিভ মাত্রা ব্যবহার করা যায় না。
উদাহরণ হিসাবে, যদি আপনি সবকটি h1 এলিমেন্টের দিকগুলিতে 10 পিক্সেল অভ্যন্তরীণ মাঝারি রাখতে চান, তবে এইভাবে করুন:
h1 {padding: 10px;}
আপনি একইভাবে উপর, ডান, নিচ ও বাম দিকের অভ্যন্তরীণ মাঝারি সবকটিকে যথাক্রমে সেট করতে পারেন, যেকোনো দিকের মাঝারি বিভিন্ন ইউনিট বা শতকরা মাত্রা ব্যবহার করতে পারেন:
h1 {padding: 10px 0.25em 2ex 20%;}
একককালীন অভ্যন্তরীণ মাঝারি অ্যাট্রিবিউট
পরিমাণগত অভ্যন্তরীণ মাঝারি অ্যাট্রিবিউটগুলি নিম্নলিখিত চারটি পৃথক অ্যাট্রিবিউটের মাধ্যমে সেট করা যায়:
আপনি হয়তো ভাবতে পারেন, নিচের এই পদ্ধতিটি উপরের সংক্ষিপ্ত পদ্ধতিটির মতোই কাজ করে:
h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; }
অভ্যন্তরীণ মাঝারির শতকরা মাত্রা
আগে উল্লেখ করা হয়েছে, এলিমেন্টের অভ্যন্তরীণ মাঝারিকে শতকরা মাত্রা সেট করা যায় তা হলে, শতকরা মাত্রা পিতৃ এলিমেন্টের width-এর প্রতি নির্ধারিত হয়, এটা অভ্যন্তরীণ মাঝারির মতোই। তাই, যদি পিতৃ এলিমেন্টের width-এর পরিবর্তন হয়, তবে তারাও পরিবর্তন হবে。
নিচের এই পদ্ধতিটি প্যারাগ্রাফের অভ্যন্তরীণ মাঝারিকে পিতৃ এলিমেন্টের width-এর 10% হিসাবে সেট করেছে:
p {padding: 10%;}
উদাহরণে: যদি একটি প্যারাগ্রাফের পিতৃ এলিমেন্ট div এলিমেন্ট, তবে তার অভ্যন্তরীণ মাঝারি div-এর width-এর উপর নির্ধারিত হবে。
<div style="width: 200px;"> <p>This paragragh is contained within a DIV that has a width of 200 pixels.</p> </div>
ধ্যান দিন:উপরের ও নিচের অভ্যন্তরীণ মাঝারি ও ডানদিকের ও বামদিকের অভ্যন্তরীণ মাঝারি একই হয়; অর্থাৎ, উপরের ও নিচের অভ্যন্তরীণ মাঝারির শতকরা মাত্রা পিতৃ এলিমেন্টের width-এর প্রতি নির্ধারিত হয় না, এটা height-এর প্রতি নির্ধারিত নয়。
CSS অভ্যন্তরীণ মাঝারি উদাহরণঃ
- সকল অভ্যন্তরীণ মাঝারি অ্যাট্রিবিউটগুলি একটি বিবৃতিতে
- এই উদাহরণটি দেখিয়ে দেয় কিভাবে সকল অভ্যন্তরীণ মাঝারি অ্যাট্রিবিউটগুলিকে একটি বিবৃতিতে সেট করা যায় যা একটি থেকে চারটি মাত্রা থাকতে পারে。
- নিচের অভ্যন্তরীণ মাঝারি 1 সেট করুন
- এই উদাহরণটি দেখিয়ে দেয় কিভাবে সেন্টিমিটার মাত্রায় সেলের নিচের অভ্যন্তরীণ মাঝারি নির্ধারণ করা যায়。
- নিচের অভ্যন্তরীণ মাঝারি 2 সেট করুন
- এই উদাহরণটি দেখিয়ে দেয় কিভাবে শতকরা মাত্রায় সেলের নিচের অভ্যন্তরীণ মাঝারি নির্ধারণ করা যায়。
- ডানদিকের অভ্যন্তরীণ মাঝারি 1 সেট করুন
- এই উদাহরণটি দেখিয়ে দেয় কিভাবে সেন্টিমিটার মাত্রায় সেলের ডানদিকের অভ্যন্তরীণ মাঝারি নির্ধারণ করা যায়。
- ডানদিকের অভ্যন্তরীণ মাঝারি 2 সেট করুন
- এই উদাহরণটি দেখিয়ে দেয় কিভাবে শতকরা মাত্রায় সেলের ডানদিকের অভ্যন্তরীণ মাঝারি মাঝারি নির্ধারণ করা যায়。
- 设置右内边距 1
- 本例演示如何使用厘米值来设置单元格的右内边距。
- 设置右内边距 2
- 本例演示如何使用百分比值来设置单元格的右内边距。
- 设置上内边距 1
- 本例演示如何使用厘米值来设置单元格的上内边距。
- အတွင်း အရွယ် 2
- အမျိုးဆုံး အချက် ဖော်ပြ ရန်
CSS အတွင်း အချက်
အချက် | ဖော်ပြ |
---|---|
padding | လိုင်းဆိုင် ဘာသာ |
padding-bottom | အဆိုင်း ဘယ်ချင်း အရွယ် အထူး ပြင်းပြီး အသုံးပြုရန် |
padding-left | အဆိုင်း ဆက်ကပ် အရွယ် အထူး ပြင်းပြီး အသုံးပြုရန် |
padding-right | အဆိုင်း ဘယ်ချင်း အရွယ် အထူး ပြင်းပြီး အသုံးပြုရန် |
padding-top | အဆိုင်း အတွင်း အရွယ် အထူး ပြင်းပြီး အသုံးပြုရန် |
- အရှေ့လွှတ် CSS အဆိုင်များ အစီအစဉ်
- နောက်လွှတ် CSS အကျယ်