CSS অভ্যন্তরীণ মাঝামাঝি

এই এলিমেন্টের প্যাডিং 70px।

CSS অভ্যন্তরীণ মাঝামাঝি

অভ্যন্তরীণ সাম্প্রতিক মাপ এবং এলিমেন্ট প্রস্থ padding এট্রিবিউট ব্যবহৃত হয় যাতে সংজ্ঞায়িত সীমান্তের ভিতরের এলিমেন্ট কন্টেন্টের চারপাশে জায়গা তৈরি করা হয়。

CSS-এর মাধ্যমে, আপনি প্যাডিং (পুল) কেবল নিয়ন্ত্রণ করতে পারেন। একটি এট্রিবিউট এলিমেন্টের প্রতিটি পাশ (উপর, ডান, নীচে এবং ডানদিকে) প্যাডিং নির্দিষ্ট করতে পারে।

Padding - একক পাশ

CSS এলিমেন্টের প্রতিটি পাশের প্যাডিং নির্দিষ্ট করার জন্য একটি এট্রিবিউট সহযোগে রয়েছে:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

সকল প্যাডিং এট্রিবিউটকে নিচের মূল্যগুলো নির্দিষ্ট করা যেতে পারে:

  • length - px, pt, cm ইত্যাদি ইউনিটে প্যাডিং নির্দিষ্ট করুন
  • % - প্যাডিংকে সম্পূর্ণ এলিমেন্ট চৌম্বকত্বের প্রতিশতে নির্দিষ্ট করুন
  • inherit - পিতৃতত্ত্বাধীন প্যাডিং নির্দিষ্ট করুন

সুঝানা:নেতিবাচক মূল্য অনুমোদিত নয়。

উদাহরণ

সকল চারটি দিকের <div> এলিমেন্টকে ভিন্ন প্যাডিং নির্দিষ্ট করুন:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

আপনার হাতে পরীক্ষা করুন

Padding - সংক্ষিপ্ত এট্রিবিউট

কোডটি কম করতে, সকল আঙ্গুল প্যাডিং এটি একটি অ্যাট্রিবিউটে নির্দিষ্ট করতে হবে。

padding 属性是以下各内边距属性的简写属性：

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

工作原理是这样的：

padding: 25px 50px; padding 属性有四个值：

  • padding: 25px 50px 75px 100px;
    • 上内边距是 25px
    • 右内边距是 50px
    • উপরদিকের অভ্যন্তরীণ সাম্প্রতিক মাপ 25px
    • 左内边距是 100px

উদাহরণ

使用设置了四个值的 padding 简写属性：

div {
  padding: 25px 50px 75px 100px;
}

আপনার হাতে পরীক্ষা করুন

padding: 25px 50px; padding 属性设置了三个值：

  • তিনটি মান সম্পূর্ণ প্যাডিং সংক্ষিপ্ত বৈশিষ্ট্য ব্যবহার করে:
    • 上内边距是 25px
    • উপরদিকের এবং নিচের অভ্যন্তরীণ সাম্প্রতিক মাপ 25px
    • উপরদিকের অভ্যন্তরীণ সাম্প্রতিক মাপ 25px

উদাহরণ

নিচের অভ্যন্তরীণ সাম্প্রতিক মাপ 75px

div {
  তিনটি মান সম্পূর্ণ প্যাডিং সংক্ষিপ্ত বৈশিষ্ট্য ব্যবহার করে:
}

আপনার হাতে পরীক্ষা করুন

padding: 25px 50px; padding padding: 25px 50px 75px;

  • দুটি মান সম্পূর্ণ প্যাডিং সংক্ষিপ্ত বৈশিষ্ট্য ব্যবহার করে:
    • দুটি মান সম্পূর্ণ প্যাডিং বৈশিষ্ট্যকে দুটি মান সম্পূর্ণ প্যাডিং বৈশিষ্ট্য নির্দিষ্ট করে:
    • উপরদিকের এবং নিচের অভ্যন্তরীণ সাম্প্রতিক মাপ 25px

উদাহরণ

ডানদিকের এবং ডানদিকের অভ্যন্তরীণ সাম্প্রতিক মাপ 50px

div {
  দুটি মান সম্পূর্ণ প্যাডিং সংক্ষিপ্ত বৈশিষ্ট্য ব্যবহার করে:
}

আপনার হাতে পরীক্ষা করুন

padding: 25px 50px; padding যদি

  • padding: 25px;
    • একটি মান সম্পূর্ণ প্যাডিং বৈশিষ্ট্যকে একটি মান সম্পূর্ণ প্যাডিং বৈশিষ্ট্য নির্দিষ্ট করে:

উদাহরণ

সকল চারটি অভ্যন্তরীণ সাম্প্রতিক মাপ 25px

div {
  padding: 25px;
}

আপনার হাতে পরীক্ষা করুন

একটি মান সম্পূর্ণ প্যাডিং সংক্ষিপ্ত বৈশিষ্ট্য ব্যবহার করে:

অভ্যন্তরীণ সাম্প্রতিক মাপ এবং এলিমেন্ট প্রস্থ CSS width

তাই, যদি এলিমেন্টের নির্দিষ্ট প্রস্থ থাকে, তবে এলিমেন্টের অভ্যন্তরীণ সাম্প্রতিক মাপগুলি এলিমেন্টের মোট প্রস্থে জুড়ে যাবে। এটি সাধারণত অপসান্ন ফলাফল।

উদাহরণ

এখানে, <div> এলিমেন্টের প্রস্থ 300px হলেও, <div> এলিমেন্টের বাস্তবিক প্রস্থ 350px (300px + ডানদিকের অভ্যন্তরীণ সাম্প্রতিক মাপ 25px + ডানদিকের অভ্যন্তরীণ সাম্প্রতিক মাপ 25px) হবে:

div {
  width: 300px;
  padding: 25px;
}

আপনার হাতে পরীক্ষা করুন

যদি আপনি 300px প্রস্থকে স্থায়ী রাখতে চান, যেহেতু পূর্ণতা কীভাবেই থাকে, তবে আপনি এটা ব্যবহার করতে পারেন: box-sizing বৈশিষ্ট্যটি এলিমেন্টের বিষয়গত অঞ্চলের প্রস্থকে নির্দিষ্ট করে। বিষয়গত অঞ্চল হল এলিমেন্ট (বক্স মডেল) এর অভ্যন্তরীণ সাম্প্রতিক মাপ, কান্ঠ এবং বাহ্যিক সাম্প্রতিক মাপের মধ্যে অবস্থিত।

উদাহরণ

box-sizing বৈশিষ্ট্য ব্যবহার করে 300px প্রস্থকে স্থায়ী রাখুন, যেহেতু পূর্ণতা কীভাবেই থাকে:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

আপনার হাতে পরীক্ষা করুন

আরও উদাহরণ

ডানদিকের অভ্যন্তরীণ সাম্প্রতিক মাপ সজ্জা করুন
এই উদাহরণটি প্রদর্শন করে কিভাবে <p> এলিমেন্টের ডানদিকের অভ্যন্তরীণ সাম্প্রতিক মাপ সজ্জা করা যায়。
ডানদিকের অভ্যন্তরীণ সাম্প্রতিক মাপ সজ্জা করুন
এই উদাহরণটি প্রদর্শন করে কিভাবে <p> এলিমেন্টের ডানদিকের অভ্যন্তরীণ সাম্প্রতিক মাপ সজ্জা করা যায়。
উপরের অভ্যন্তরীণ সাম্প্রতিক মাপ সজ্জা করুন
এই উদাহরণটি প্রদর্শন করে কিভাবে <p> এলিমেন্টের উপরের অভ্যন্তরীণ সাম্প্রতিক মাপ সজ্জা করা যায়。
নিচের অভ্যন্তরীণ সাম্প্রতিক মাপ সজ্জা করুন
এই উদাহরণটি প্রদর্শন করে কিভাবে <p> এলিমেন্টের নিচের অভ্যন্তরীণ সাম্প্রতিক মাপ সজ্জা করা যায়。

সকল CSS অভ্যন্তরীণ সাম্প্রতিক মাপ বৈশিষ্ট্য

বৈশিষ্ট্য বর্ণনা
padding একটি একক বিবরণে সকল অভ্যন্তরীণ সাম্প্রতিক মাপ বৈশিষ্ট্যকে সজ্জা করার জন্য সংক্ষিপ্ত বৈশিষ্ট্য
padding-bottom এলিমেন্টের নিচের অভ্যন্তরীণ সাম্প্রতিক মাপ সজ্জা করুন。
padding-left এলিমেন্টের ডানদিকের অভ্যন্তরীণ সাম্প্রতিক মাপ সজ্জা করুন。
padding-right এলিমেন্টের ডানদিক ইনসিডিং প্যাডিং সেট করুন。
padding-top এলিমেন্টের উপর আপের ইনসিডিং প্যাডিং সেট করুন。

সম্প্রসারিত পড়া

অতিরিক্ত বইঃবক্স মডেল: CSS ইনসিডিং প্যাডিং