কম্পিউটার
 Computer >> কম্পিউটার >  >> প্রোগ্রামিং >> HTML

এইচটিএমএল ব্লক-লেভেল বনাম ইনলাইন-ব্লক এলিমেন্টস (ওভারভিউ)

ব্লক-লেভেলের মধ্যে পার্থক্য সম্পর্কে জানুন &ইনলাইন ব্লক HTML এ উপাদান।

HTML-এ, সমস্ত উপাদানের একটি ডিফল্ট ডিসপ্লে থাকে ইউজার এজেন্ট স্টাইলশীট (UAS) দ্বারা উত্তরাধিকারসূত্রে প্রাপ্ত মান যা সমস্ত ব্রাউজারে অন্তর্নির্মিত।

দুটি প্রদর্শন মান বিকল্প আছে, ব্লক৷ এবং ইনলাইন:

  • CSS-এ ব্লক করুন:display:block;
  • সিএসএস-এ ইনলাইন:ডিসপ্লে:ইনলাইন-ব্লক;

যেকোনো HTML উপাদানের আচরণ বা স্টাইল ব্রাউজারের ইউজার এজেন্ট স্টাইলশীট (UAS) থেকে আসে — যা আপনি সহজেই ওভাররাইড করতে পারেন। তাই যেকোন ব্লক-লেভেল এলিমেন্টকে একটি ইনলাইন এলিমেন্টে রূপান্তরিত করা যেতে পারে, একটি সহজ ঘোষণা দিয়ে:display:inline-block; — এবং তদ্বিপরীত।

ব্লক-লেভেল এলিমেন্ট কি?

HTML-এ, একটি ব্লক-স্তরের উপাদান এমন একটি উপাদান যা সর্বদা একটি নতুন লাইনে শুরু হয় (একটি লাইন বিরতির মতো) এবং এর ধারকটির সম্পূর্ণ প্রস্থ (প্যারেন্ট এলিমেন্ট) গ্রহণ করে।

তাই যদি আমি একটি

যোগ করি এই অনুচ্ছেদের ঠিক নীচে উপাদান, এটি তার মূল উপাদান কন্টেইনারের বাম থেকে ডান প্রান্তে সমগ্র প্রস্থ নিয়ে যায়৷

কোড উদাহরণ:

<div>I’m a block-level element.</div>

ফলাফল:

আমি একটি ব্লক-স্তরের উপাদান।

ঠিক আছে এটা দেখতে কঠিন যে এটি সম্পূর্ণ প্রস্থ নেয়। এটি দেখতে সহজ করতে আসুন এটিতে একটি বর্ডার যোগ করি:

<div style="border:1px solid #dd4c4f">I’m a block-level element.</div>

ফলাফল:

আমি একটি ব্লক-স্তরের উপাদান।

এখন আপনি

দেখতে পারেন উপাদানটি তার ধারকটির সম্পূর্ণ প্রস্থ নেয়, যেটি আপনি এই ওয়েবসাইটে আছেন সেটি হল একটি
উপাদান।

আমি যেমন উল্লেখ করেছি, ব্লক-স্তরের উপাদানগুলি একটি নতুন লাইন শুরু করে এবং এটি কোড স্তরে কীভাবে দেখায় এবং ব্যবহারকারীর দৃষ্টিকোণ থেকে এটি ব্রাউজারে কীভাবে রেন্ডার হয় তা এখানে রয়েছে:

<div style="border:1px solid #dd4c4f">I’m a block-level element.</div>
<div style="border:1px solid #dd4c4f">I’m another block-level element.</div>

এটা কেমন দেখাচ্ছে:

আমি একটি ব্লক-লেভেল উপাদান। আমি অন্য ব্লক-লেভেল উপাদান।

যদি দুটি

হয় উপরের উপাদানগুলি ছিল ইনলাইন তারা একই লাইনে একে অপরের ঠিক পাশে বসবে (যেমন আপনি পরবর্তী বিভাগে দেখতে পাবেন)। কিন্তু যেহেতু তারা ব্লক-লেভেল উপাদান, তাই তারা লেআউটে তাদের নিজস্ব লাইনে বসে থাকে এবং প্রত্যেকে প্যারেন্ট কন্টেইনারের সম্পূর্ণ প্রস্থ নেয়

সমস্ত HTML ব্লক-লেভেল উপাদান

HTML-এ ব্লক-স্তরের উপাদানগুলির একটি সম্পূর্ণ তালিকা:

যোগাযোগের তথ্য।
নিবন্ধের বিষয়বস্তু।
কন্টেন্ট একপাশে।
দীর্ঘ ("ব্লক") উদ্ধৃতি।
বিস্তারিত>
ডিসক্লোজার উইজেট।
ডায়ালগ বক্স।
একটি বর্ণনা তালিকায় একটি শব্দ বর্ণনা করে।
নথি বিভাগ।
বর্ণনা তালিকা।
বিবরণ তালিকা শব্দ।
ক্ষেত্র সেট লেবেল।
চিত্রের ক্যাপশন।
একটি ক্যাপশন
সহ মিডিয়া বিষয়বস্তুকে গ্রুপ করে )।
বিভাগ বা পৃষ্ঠার ফুটার।
ইনপুট ফর্ম।

,

,

,

,
,

হেডিং লেভেল ১-৬।
বিভাগ বা পৃষ্ঠা শিরোনাম।
গ্রুপ হেডার তথ্য।
অনুভূমিক নিয়ম (বিভাজন রেখা)।


    • তালিকা আইটেম।
    প্রধান বিষয়বস্তুর ধারক।
    নেভিগেশন লিঙ্ক রয়েছে।
    অর্ডার করা তালিকা।

    অনুচ্ছেদ।
    <div style="display:inline-block;border:1px solid #dd4c4f;">
  I’m a inline-block element
</div>

    এটা কেমন দেখাচ্ছে:

    আমি একটি ইনলাইন ব্লক-এলিমেন্ট।

    ইনলাইন ব্লক উপাদানগুলি একটি নতুন লাইনে শুরু হয় না (লাইন বিরতি)৷৷

    সুতরাং আপনার যদি কোড লেভেলে একে অপরের পাশে দুটি ইনলাইন ব্লক উপাদান থাকে:

    <div style="display:inline-block;border:1px solid #dd4c4f">
  I’m a inline block element.
</div>
<div style="display:inline-block;border:1px solid #dd4c4f">
  I’m a another inline block element.
</div>

    তারপর তারা ব্রাউজারে এইভাবে রেন্ডার করে:

    আমি একটি ইনলাইন ব্লক-এলিমেন্ট। আমি একটি ইনলাইন অন্য ব্লক-এলিমেন্ট।

    এবং ইনলাইন ব্লক এবং ব্লক কীভাবে একে অপরের থেকে আলাদা তা বোঝার জন্য, আসুন তাদের "পাশাপাশি" তুলনা করি:

    আমি একটি ইনলাইন ব্লক-এলিমেন্ট। আমি একটি ব্লক-এলিমেন্ট।

    সমস্ত HTML ইনলাইন ব্লক উপাদান

    HTML এ সমস্ত ইনলাইন উপাদানের একটি তালিকা:

    (শুধুমাত্র যদি এটিতে দৃশ্যমান নিয়ন্ত্রণ থাকে)