প্রদর্শন: ইনলাইন এবং প্রদর্শন: ইনলাইন-ব্লকের মধ্যে পার্থক্য কী?

Question

সিএসএসের মান inlineএবং inline-blockমানগুলির মধ্যে ঠিক কী পার্থক্য রয়েছে display?

Answer 1

একটি চাক্ষুষ উত্তর

ক এর <span>ভিতরে একটি উপাদান কল্পনা করুন <div>। আপনি যদি <span>উপাদানটিকে 100px উচ্চতা এবং উদাহরণস্বরূপ একটি লাল সীমানা দেন তবে এটি এর সাথে দেখতে হবে

প্রদর্শন: ইনলাইন

প্রদর্শন: ইনলাইন-ব্লক

প্রদর্শন ব্লক

কোড: http://jsfiddle.net/Mta2b/

সহ উপাদানগুলি উপাদানগুলির display:inline-blockমতো হয় display:inlineতবে তাদের প্রস্থ এবং উচ্চতা থাকতে পারে । এর অর্থ হ'ল পাঠ্য বা অন্যান্য উপাদানগুলির মধ্যে প্রবাহিত করার সময় আপনি কোনও ইনলাইন-ব্লক উপাদানটিকে ব্লক হিসাবে ব্যবহার করতে পারেন।

সংক্ষিপ্ত রূপ হিসাবে সমর্থিত শৈলীর পার্থক্য:

• ইনলাইন : শুধুমাত্র margin-left, margin-right, padding-left,padding-right
• ইনলাইন-ব্লক : margin, padding, height,width

Comments

দুর্দান্ত অন্তর্দৃষ্টি। সুতরাং পার্থক্যটি হ'ল ইনলাইন উপাদানগুলির উচ্চতার বৈশিষ্ট্যটি সেট করা যায় না?

— ব্যবহারকারী 2316667

@ ব্যবহারকারী 2316667 এবং প্রস্থ

— অস্কার

@ ব্যবহারকারী 2316667 এবং @ অস্কারক্যাল্ডারন: এছাড়াও, ইনলাইন উপাদানগুলি উল্লম্ব মার্জিন এবং প্যাডিংসের যত্ন করে না এবং পরবর্তী উপাদানটি একই লাইনে স্থাপন করা হবে (এর পরে কোনও লাইন ব্রেক নেই)। মত ব্লক উপাদান p, divএকটি সম্পূর্ণ প্রস্থ লাইন (একটি লাইন বিরতি বাধ্য) কিন্তু সম্মান প্রস্থ / উচ্চতা এবং সব অনুভূমিক / উল্লম্ব প্যাডিং / মার্জিন পেতে। ইনলাইন-ব্লক উপাদানগুলির ব্লকের মতোই আচরণ করা হয় তবে পুরো লাইন ব্রেক ছাড়াই (অন্যান্য উপাদানগুলি তাদের পাশে রাখা যেতে পারে)

— এস.সর্পুশন

প্যাডিং-টপ এবং প্যাডিং-রাইট ইনলাইন উপাদানটির প্রদর্শন প্রভাবকেও প্রভাবিত করে, কিছুটা গোলযোগ সৃষ্টি করে।

— tomwang1013

@ manuman94 না, এর অর্থ এই নয়। সমস্ত ভিন্ন ধরণের প্রদর্শন ধরণের জন্য ব্যবহারের কেস রয়েছে।

— স্প্ল্যাটনে

Answer 2

display: inline;একটি বাক্যে ব্যবহার করার জন্য এটি একটি প্রদর্শন মোড। উদাহরণস্বরূপ, যদি আপনার কাছে অনুচ্ছেদ থাকে এবং আপনি একটি শব্দটি হাইলাইট করতে চান:

<p>
    Pellentesque habitant morbi <em>tristique</em> senectus
    et netus et malesuada fames ac turpis egestas.
</p>

<em>উপাদান একটি আছে display: inline;কারণ এই ট্যাগটি সবসময় একটি বাক্যে ব্যবহার করা হয়, ডিফল্টরূপে। <p>উপাদান একটি আছে display: block;কারণ জগত একটি বাক্য কিংবা একটি বাক্যে, এটা বাক্য একটি ব্লক এর আছে, ডিফল্টরূপে।

একটি উপাদান সহ একটি বা একটি বা উল্লম্ব থাকতে display: inline; পারে না । এর সাথে একটি উপাদান থাকতে পারে একটি , এবং । আপনি যদি একটি যুক্ত করতে চান তাহলে করতে উপাদান, আপনি এই উপাদান সেট করতে হবে । এখন আপনি উপাদান এবং অন্যান্য প্রতিটি ব্লক শৈলীতে ( অংশ ) যুক্ত করতে পারেন, তবে এটি একটি বাক্যে ( অংশের ) রেখে দেওয়া হয়েছে।heightwidthmargindisplay: block; widthheightmargin
height<em>display: inline-block;heightblockinline-blockinlineinline-block

Comments

দুর্দান্ত উত্তর! tl; dr - আপনি যদি ইনলাইন উপাদানগুলিকে পুনরায় আকার দিতে চান তবে আপনি প্রদর্শন টাইপ হিসাবে ইনলাইন-ব্লকটি ব্যবহার করতে পারেন ।

— ত্রুটিপ্রবণ

ক্ষুদ্র সংশোধন: ইনলাইন উপাদানের পারেন অনুভূমিক মার্জিন (ডান, বাম), কিন্তু আছে না উল্লম্ব মার্জিন (শীর্ষ, নীচে)

— whyleee

উত্তম উত্তর কারণ আপনি উল্লেখ করেছেন যে displayমানগুলির মধ্যে একটি বেছে নেওয়ার সময় আমরা কী করতে পারি / পারি না ।

— ha9u63ar

Answer 3

উত্তরে উল্লেখ করা হয়নি এমন একটি বিষয় হ'ল ইনলাইন উপাদানগুলি লাইনগুলির মধ্যে বিরতি ফেলতে পারে যখন ইনলাইন-ব্লক করতে পারে না (এবং স্পষ্টতই অবরুদ্ধ হতে পারে)! সুতরাং ইনলাইন উপাদানগুলি পাঠ্যের বাক্যগুলিকে স্টাইল করার জন্য এবং সেগুলির মধ্যে ব্লকগুলি কার্যকর হতে পারে তবে সেগুলি প্যাড করা যায় না বলে পরিবর্তে আপনি লাইন-উচ্চতা ব্যবহার করতে পারেন ।

<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<hr/>
<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline-block; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 4

উপরের সমস্ত উত্তর মূল প্রশ্নের গুরুত্বপূর্ণ তথ্য অবদান রাখে। তবে, একটি সাধারণীকরণ রয়েছে যা ভুল বলে মনে হচ্ছে।

কমপক্ষে একটি ইনলাইন উপাদান (যা আমি ভাবতে পারি) - এর <img>উপাদানটির প্রস্থ এবং উচ্চতা নির্ধারণ করা সম্ভব ।

উভয়ই এখানে এবং এই সদৃশ জবাব স্বীকার করেছে যে এটি সম্ভব নয় তবে এটি কোনও বৈধ সাধারণ নিয়মের মতো বলে মনে হচ্ছে না।

উদাহরণ:

img {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

<img src="#" />

imgহয়েছে display: inline, কিন্তু তার widthএবং heightসফলভাবে স্থাপন করা হয়েছে।

Comments

আসলে, আইএমজি-ট্যাগের তাদের ডিফল্ট প্রদর্শন মান হিসাবে ডিসপ্লে-ইনলাইন থাকে। সুতরাং সে জন্য প্রস্থ এবং উচ্চতা নির্ধারণ করা সম্ভব।

— অ্যালেক্স

আইএমজি একটি ইনলাইন উপাদান -> বিকাশকারী.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েবে / এইচটিএমএল / ইনলাইন_ উপাদানসমূহ ... সুতরাং মূলত আপনি যা বলছেন ঠিক তেমনই আপনি কম-বেশি বলছেন এবং আপনি নিম্নগামী হচ্ছেন ??

— alexandros84

না আমি নই. আইএমজি-ট্যাগগুলি একটি "প্রতিস্থাপিত উপাদান" যা মূলত অর্থ বিষয়বস্তু প্রতিস্থাপন করা হয় তাই এটি কোনও ইনলাইন-ব্লক উপাদানের মতো আচরণ করে। এবং হ্যাঁ আসল ডিফল্ট সম্পত্তি (ব্রাউজারের দ্বারা গণিত সম্পত্তি ইনলাইন হয়)। তবে এর একমাত্র কারণ, কারণ ইনএসলাইন-ব্লকটি সিএসএস 2 অবধি চালু হয়নি এবং সেখানে এটি একটি "ইনলাইন উপাদান একটি ইনলাইন-ব্লক উপাদানটির মতো আচরণ করে" কারণ এটি এর সামগ্রী দ্বারা প্রতিস্থাপন করা হয়েছে। যেমন আপনি উপাদানটির উচ্চতা / প্রস্থ নির্ধারণ করছেন না, আপনি এটির বিষয়বস্তুটিতে সেট করছেন - উইয়ার্ড, হ্যাঁ। আমি জানি. drafts.csswg.org/css2/conform.html#repবাস-eament

— অ্যালেক্স

আপনি যা বলছেন তা আসলেই আকর্ষণীয়। আমাকে গবেষণা এবং পুনরায় সম্পাদনার জন্য কিছু সময় দিন এবং সম্ভবত ডাউনভোট এবং উর্ধ্বতনটি এর পরিবর্তে ফিরিয়ে নেবেন ..! দিনের শেষে আমি ইতিমধ্যে সত্যই অনুভব করি যে এই আলোচনাটি পুরো বিতর্কটির সম্পূর্ণতার জন্য অবদান রাখছে।

— alexandros84

Answer 5

স্প্ল্যাটেনের উত্তর সম্ভবত বেশিরভাগ ক্ষেত্রেই covered াকা থাকে তাই আমি একই জিনিসটির পুনরাবৃত্তি করব না, তবে: inlineএবং সিএসএস সম্পত্তি inline-blockনিয়ে আলাদাভাবে আচরণ করব direction।

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

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

তবে, যদি আমি এগিয়ে গিয়ে সেট করে displayরাখি inline-blockতবে ব্রাউজারটি directionসম্পত্তিটিকে সম্মান করে এবং উপাদানগুলি ডান থেকে বামে যাতে ক্রমে সরবরাহ করে two oneতা উপস্থিত হয়।

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline-block;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

আমি জানি না এর সাথে অন্য কোনও কোলাকুলি আছে কি না, আমি কেবলমাত্র এ সম্পর্কে অভিজ্ঞতায় ক্রোমে পেয়েছি।