<img> উপাদান ব্লক স্তর বা ইনলাইন স্তর?


163

আমি কোথাও পড়েছি যে <img>উপাদান উভয়ের মত আচরণ করে। সঠিক হলে, কেউ দয়া করে উদাহরণ দিয়ে ব্যাখ্যা করতে পারেন?

উত্তর:


189

এটি সত্য, এগুলি উভয়ই - বা আরও স্পষ্টভাবে তারা "ইনলাইন ব্লক" উপাদান। এর অর্থ হ'ল এগুলি পাঠ্যের মতো ইনলাইন প্রবাহিত হয় তবে ব্লক উপাদানগুলির মতো প্রস্থ এবং উচ্চতাও রয়েছে।

সিএসএসে, আপনি display: inline-blockছবিগুলির আচরণের প্রতিরূপ তৈরি করতে আপনি একটি উপাদান সেট করতে পারেন ।

চিত্র এবং অবজেক্টগুলি "প্রতিস্থাপিত" উপাদান হিসাবেও পরিচিত, যেহেতু সেগুলিতে প্রতি লিখিত সামগ্রী থাকে না তাই উপাদানটি মূলত বাইনারি ডেটা দ্বারা প্রতিস্থাপিত হয়।

* নোট করুন যে ব্রাউজারগুলি প্রযুক্তিগতভাবে ব্যবহার করে display: inline(বিকাশকারী সরঞ্জামগুলিতে দেখা যায়) তবে তারা চিত্রগুলিকে বিশেষ চিকিত্সা দিচ্ছে। তারা এখনও সমস্ত বৈশিষ্ট্য অনুসরণ inline-block


আমি সর্বদা পড়ি যে চিত্রগুলি ইনলাইন উপাদানগুলি নয়, ইনলাইন-ব্লক নয়, তবে এটি প্রস্থ এবং উচ্চতা যুক্ত করার সক্ষমতা থাকার কারণে এগুলি ইনলাইন-ব্লক হবে sense
ডোনাটো

22
এই উত্তরটি প্রযুক্তিগতভাবে সঠিক নয়। স্পষ্টভাবে বলতে গেলে, imgউপাদানগুলি inline-blockআসলে inlineউপাদান নয়। আপনি এটি একটি আধুনিক ব্রাউজারে একটি চিত্রের ডান ক্লিক করে, "উপাদানটি পরীক্ষা করুন" ক্লিক করে, তারপরে গণিত শৈলীটি দেখে এটি পরীক্ষা করতে পারেন, যা প্রদর্শিত হবে display: inline। ট্যাগের ভিতরে কোনও ব্লক প্রসঙ্গ ঘটছে না, সুতরাং এটি কল করা ঠিক হবে না inline-block। প্রতিস্থাপিত ইনলাইন উপাদানগুলির বিষয়ে আরও তথ্যের জন্য কোয়ান্টিনের উত্তর এবং এই এমডিএন নিবন্ধটি দেখুন
ম্যাক্সিমিলিয়ান লমিস্টার

@ ম্যাক্স সেই লিঙ্কটি প্রতিস্থাপিত উপাদানগুলি ইনলাইন হওয়ার বিষয়ে কিছুই বলে না।
অসন্তুষ্টGoat

@ DisgruntledGoat আমি যে লিঙ্কটি পোস্ট করেছি তা এলো না যে imgউপাদানগুলি ইনলাইন - গুগল ক্রোম দেব সরঞ্জামগুলি imgউপাদানগুলিকে ইনলাইন হিসাবে দেখায় । এই পোস্টটি আমি এখনও অবধি খুঁজে পেয়েছি যা বলে যে তারা inline-blockপরিবর্তে। মজার বিষয় হল, আমি এমন কোনও কর্তৃপক্ষ পাইনি যা বলে যে তারা inlineহয়। ট্যাগটি প্রয়োগের উপর নির্ভর করে কীভাবে আচরণ করা যায়, সম্ভবত?
ম্যাক্সিমিলিয়ান লমিস্টার

2
@Max মতে এই , প্রতিস্থাপিত উপাদান সিএসএস বিন্যাস মডেল আওতার বাইরে হয়। এইচটিএমএল বা সিএসএস স্পেসের কোনও কিছুই ইমেজগুলিতে ইনলাইন রয়েছে তা নির্দিষ্ট করে না। ব্রাউজারটি যা বলে তা নির্বিশেষে চিত্রগুলি যেমন সেট করা হয়েছিল ঠিক তেমন আচরণ করা হয় display:inline-block
অসন্তুষ্ট গোয়াট

53

একটি imgউপাদান একটি প্রতিস্থাপিত ইনলাইন উপাদান

এটি একটি ইনলাইন উপাদানটির মতো আচরণ করে (কারণ এটি) তবে ইনলাইন উপাদানগুলি সম্পর্কে কিছু সাধারণীকরণ উপাদানগুলির ক্ষেত্রে প্রযোজ্য নয় img

যেমন

সাধারণীকরণ: "প্রস্থ ইনলাইন উপাদানগুলির জন্য প্রযোজ্য নয়"

অনুমানটি আসলে কী বলে : "এতে প্রযোজ্য: সমস্ত উপাদান তবে অ-প্রতিস্থাপন ইনলাইন উপাদান, সারণী সারি এবং সারি গোষ্ঠী"

যেহেতু একটি চিত্র একটি প্রতিস্থাপন ইনলাইন উপাদান, এটি প্রযোজ্য।


13

আইএমজি উপাদানগুলি ইনলাইন, এর অর্থ তারা ভাসা না করা পর্যন্ত তারা পাঠ্য এবং অন্যান্য ইনলাইন উপাদানগুলির সাথে অনুভূমিকভাবে প্রবাহিত হবে।

এগুলি "ব্লক" উপাদান যা তাদের প্রস্থ এবং উচ্চতা। তবে তারা সে ক্ষেত্রে আরও "ইনলাইন-ব্লক" এর মতো আচরণ করে।


7

প্রায় সমস্ত উদ্দেশ্যে তাদের প্রস্থ সেট সহ একটি ইনলাইন উপাদান হিসাবে ভাবেন। সিএসএস ব্যবহার করে আপনি কীভাবে চিত্রগুলি প্রদর্শন করতে চান তা নির্ধারণ করতে আপনি নির্দ্বিধায় মুক্ত। আমি সাধারণত কয়েকটি চিত্র ক্লাস সেট করি:

img.center {display:block;margin:0 auto;}

img.left {float:left;margin-right:10px;}

img.right  {float:right;margin-left:10px;}

img.border  {border:1px solid #333;}

2

আপনি যখনই কোনও চিত্র প্রবেশ করান এটি কেবলমাত্র চিত্রটির প্রস্থটি গ্রহণ করে। আপনি এর পাশের অন্য কোনও এইচটিএমএল উপাদান যুক্ত করতে পারেন এবং আপনি দেখতে পাবেন যে এটি এটির অনুমতি দেবে। এটি চিত্রকে একটি "ইনলাইন" উপাদান করে তোলে।


0

এটি সত্য, এগুলি উভয়ই - বা আরও স্পষ্টভাবে তারা "ইনলাইন ব্লক" উপাদান। এর অর্থ হ'ল এগুলি পাঠ্যের মতো ইনলাইন প্রবাহিত হয় তবে ব্লক উপাদানগুলির মতো প্রস্থ এবং উচ্চতাও রয়েছে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.