প্রদর্শন: ইনলাইন বনাম প্রদর্শন: ব্লক
উত্তর:
প্রদর্শন: ব্লক মানে অনুচ্ছেদে এবং শিরোনামগুলি সর্বদা যেমন ছিল তেমনি উপাদানটি একটি ব্লক হিসাবে প্রদর্শিত হয়। কোনও ব্লকের উপরে এবং নীচে কিছুটা সাদা জায়গা থাকে এবং অন্যদিকে আদেশ না করা ব্যতীত এটির কোনও HTML উপাদান সহ্য করে না (উদাহরণস্বরূপ, অন্য উপাদানটিতে একটি ভাসমান ঘোষণার যোগ করে)।
প্রদর্শন: ইনলাইন মানে একই লাইনের বর্তমান ব্লকের ভিতরে উপাদানটি ইনলাইন প্রদর্শিত হয়। কেবলমাত্র যখন এটি দুটি ব্লকের মধ্যে রয়েছে তখন উপাদানটি একটি 'বেনামে ব্লক' গঠন করে, তবে এটির চেয়ে সামান্যতম প্রস্থ থাকে।
প্রদর্শন বিকল্পগুলি সম্পর্কে আরও পড়ুন: http://www.quirksmode.org/css/display.html
বাধা
পূর্বে এবং পরে একটি নতুন লাইন সহ উপলব্ধ সম্পূর্ণ প্রস্থ গ্রহণ করে (প্রদর্শন: ব্লক;)
সঙ্গতিপূর্ণভাবে
এটি যতটা প্রস্থের প্রয়োজন ততটুকু গ্রহণ করে এবং নতুন লাইনগুলিকে বাধ্য করে না (প্রদর্শন: ইনলাইন;)
এখানে একটি তুলনা টেবিল:
আপনি উদাহরণ এখানে দেখতে পারেন ।
display: block;একটি ব্লক-স্তর উপাদান display: inline;তৈরি করে , যেখানে একটি ইনলাইন-স্তরের উপাদান তৈরি করে । আপনি যদি সিএসএস বক্স মডেলটির সাথে পরিচিত না হন তবে পার্থক্যটি ব্যাখ্যা করা কিছুটা কঠিন, তবে পর্যাপ্তরূপে বলাই যথেষ্ট যে ব্লক স্তরের উপাদানগুলি একটি নথির প্রবাহকে বিভক্ত করে, যেখানে ইনলাইন উপাদানগুলি না করে।
ব্লক স্তর কিছু উপাদান উদাহরণ হল: div, h1, p, এবং hrএইচটিএমএল ট্যাগ।
ইনলাইন স্তর কিছু উপাদান উদাহরণ হল: a, span, strong, em, b, এবং iএইচটিএমএল ট্যাগ।
ব্যক্তিগতভাবে, আমি ইনলাইন উপাদানগুলিকে টাইপোগ্রাফিক উপাদান হিসাবে ভাবতে পছন্দ করি । এটি সম্পূর্ণ বা প্রযুক্তিগতভাবে সঠিক নয়, তবে বেশিরভাগ অংশের জন্য ইনলাইন উপাদানগুলি অনেকটা পাঠ্যের মতো আচরণ করে।
আপনি এখানে বিষয়ের উপর নিবন্ধের মাধ্যমে আরও পড়তে পারেন । এই থ্রেডের আরও বেশ কয়েকটি ব্যক্তি এটি উদ্ধৃত করেছেন দেখে, এটি পড়ার পক্ষে উপযুক্ত হতে পারে।
প্রদর্শন: ব্লক পুরো লাইন অর্থাৎ লাইন ব্রেক ছাড়াই গ্রহণ করবে
প্রদর্শন: ইনলাইন কেবলমাত্র সঠিক স্থান প্রয়োজন যা এটি প্রয়োজন।
#block
{
display : block;
background-color:red;
border:1px solid;
}
#inline
{
display : inline;
background-color:red;
border:1px solid;
}আপনি এই ফ্রেড http://jsfiddle.net/RJXZM/1/ এ উদাহরণ উল্লেখ করতে পারেন ।
ব্লক উপাদানগুলি তাদের পিতামাতাকে পূরণ করতে প্রসারিত করে।
ইনলাইন উপাদানগুলি তাদের শিশুদের ধরে রাখতে যথেষ্ট বড় হিসাবে চুক্তি করে।
প্রদর্শন ব্লক
স্ক্রিনের পুরো সারি (100%) নেয়, এটি সর্বদা পর্দার আকারের 100% থাকে
প্রদর্শন: ইনলাইন-ব্লক প্রয়োজনীয় প্রস্থটি যত বেশি গ্রহণ করে তা স্ক্রিন আকারের 1% থেকে 100% পর্যন্ত হতে পারে
ইনলাইন-ব্লক উদাহরণ প্রদর্শন করুন
এজন্যই আমাদের বিভাজন এবং স্প্যান রয়েছে
ডিভ ডিফল্ট স্টাইলিং হ'ল ডিসপ্লে ব্লক: এটি স্ক্রিনের পুরো প্রস্থ নেয়
স্প্যান ডিফল্ট স্টাইলিংটি প্রদর্শন করা হয়: ইনলাইন ব্লক: স্প্যানটি কোনও নতুন লাইনে শুরু হয় না এবং কেবলমাত্র প্রয়োজনীয় প্রস্থ গ্রহণ করে
উপাদানটিতে একটি পটভূমি রঙ যুক্ত করুন এবং অন্যান্য পোস্টারগুলির দ্বারা ব্যাখ্যা করা হিসাবে আপনি সুন্দরভাবে ইনলাইন বনাম ব্লকের পার্থক্য দেখতে পাবেন।
প্রদর্শন: ব্লক এটি অনেকটা 'পি' ট্যাগগুলির মতোই আচরণ করে এবং এটি পুরো সারিটি গ্রহণ করে এবং এটি ভাসা না হওয়া পর্যন্ত তার পাশে কোনও উপাদান থাকতে পারে না। প্রদর্শন: ইনলাইন এটি কেবলমাত্র প্রয়োজনীয় স্থানটি ব্যবহার করে এবং অন্যান্য উপাদানগুলিকে নিজের পাশাপাশি সারিবদ্ধ করার অনুমতি দেয়।
ফর্মগুলির ক্ষেত্রে এই বৈশিষ্ট্যগুলি ব্যবহার করুন এবং আপনি আরও ভাল ধারণা পাবেন।
একটি ব্লক বা ইনলাইন-ব্লকের প্রস্থ থাকতে পারে (যেমন প্রস্থ: 400px) যখন ইনলাইন উপাদানটি প্রস্থ দ্বারা প্রভাবিত হয় না। ইনলাইন উপাদান পাঠ্যের পরবর্তী লাইনে বিস্তৃত হতে পারে (উদাহরণস্বরূপ http://codepen.io/huijing/pen/PNMxXL আপনার ব্রাউজার উইন্ডোটিকে এটি দেখতে আকার পরিবর্তন করতে পারে) যখন ব্লক উপাদানটি পারে না।
.inline {
background: lemonchiffon;
div {
display: inline;
border: 1px dashed darkgreen;
}ব্লক উপাদানসমূহ : উপাদানগুলি ডিভ, পি পছন্দ করেছে, শিরোনামগুলি ব্লক স্তর। এগুলি নতুন লাইন থেকে শুরু হয় এবং প্যারেন্ট উপাদানগুলির পূর্ণ প্রস্থ দখল করে। ইনলাইন উপাদানসমূহ : উপাদানসমূহ b, i, span, img পছন্দ করেছে ইনলাইন স্তর। এগুলি কখনই নতুন লাইন থেকে শুরু হয় না এবং সামগ্রীর প্রস্থ দখল করে না।
ডিফল্টরূপে, ইনলাইন উপাদানগুলি নথির প্রবাহে কোনও নতুন লাইন শুরু করতে বাধ্য করে না। অন্যদিকে, অবরুদ্ধ উপাদানগুলি সাধারণত একটি লাইন বিরতি ঘটায় আপনি এই লিঙ্কটি উল্লেখ করতে পারেন