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




w3schools sql (8)

উপাদানটিতে একটি ব্যাকগ্রাউন্ড-রঙ যুক্ত করুন এবং আপনি অন্যান্য পোস্টারগুলির ব্যাখ্যা অনুযায়ী, ইনলাইন বনাম ব্লকের পার্থক্যটি সুন্দরভাবে দেখতে পাবেন।

নিম্নলিখিত সিএসএস মধ্যে মৌলিক পার্থক্য কি?

display:inline

এবং এই:

display:block

একটি উপাদান উপর আলাদাভাবে এই ব্যবহার করে, আমি একই ফলাফল পেতে।


একটি ব্লক বা ইনলাইন-ব্লকের প্রস্থ (যেমন প্রস্থ: 400px) থাকতে পারে তবে ইনলাইন উপাদানটি প্রস্থ দ্বারা প্রভাবিত হয় না। ইনলাইন উপাদানটি পাঠ্যের পরবর্তী লাইনের মধ্যে প্রসারিত হতে পারে (উদাহরণস্বরূপ http://codepen.io/huijing/pen/PNMxXL এটি দেখতে আপনার ব্রাউজার উইন্ডোটি পুনরায় আকার করুন) ব্লক উপাদানটি নাও করতে পারে।

 .inline {
      background: lemonchiffon;
      div {
        display: inline;
        border: 1px dashed darkgreen;
      }

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

ফরম ক্ষেত্রে এই বৈশিষ্ট্য ব্যবহার করুন এবং আপনি একটি ভাল বোঝার পেতে হবে।


display: block; একটি ব্লক-স্তর উপাদান তৈরি করে, display: inline; একটি ইনলাইন-স্তর উপাদান তৈরি করে। যদি আপনি CSS বক্স মডেলের সাথে পরিচিত না হন তবে পার্থক্যটি ব্যাখ্যা করা একটু কঠিন, তবে বলার জন্য পর্যাপ্ত যে ব্লক স্তরের উপাদানগুলি একটি নথির প্রবাহকে ভেঙে দেয়, যখন ইনলাইন উপাদানগুলি হয় না।

ব্লক স্তরের উপাদানগুলির কিছু উদাহরণের মধ্যে রয়েছে: div , h1 , p , এবং hr এইচটিএমএল ট্যাগ।

ইনলাইন স্তরের উপাদানগুলির কিছু উদাহরণগুলির মধ্যে রয়েছে: a , span , strong , em , b , এবং i HTML ট্যাগ।

ব্যক্তিগতভাবে, আমি টাইপোগ্রাফিক উপাদান হিসাবে ইনলাইন উপাদান মনে করতে চাই। এটি সম্পূর্ণভাবে বা টেকনিক্যালি সঠিক নয়, তবে অধিকাংশ অংশ ইনলাইন উপাদানগুলি পাঠ্যের মতো অনেকগুলি আচরণ করে।

আপনি here বিষয় নিবন্ধ মাধ্যমে আরো পড়তে পারেন। এই থ্রেডে বেশ কয়েকজন লোকের উদ্ধৃতি দিয়ে এটি উদ্ধৃত করা হয়েছে, এটি একটি পঠিত মূল্য হতে পারে।


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

স্ক্রিনের পুরো সারি (100%) লাগে, এটি সর্বদা পর্দার আকারের 100%

প্রদর্শন ব্লক উদাহরণ

ডিসপ্লে: ইনলাইন-ব্লক প্রয়োজনীয় হিসাবে যতটা প্রস্থ আপ নেয়, এটি স্ক্রিন আকারের 1% থেকে 100% হতে পারে

প্রদর্শন ইনলাইন ব্লক উদাহরণ

তাই আমরা div এবং span আছে

ডিভ ডিফল্ট স্টাইলিং প্রদর্শন ব্লক: এটি পর্দার সম্পূর্ণ প্রস্থ নেয়

দৈর্ঘ্য ডিফল্ট স্টাইল প্রদর্শন করা হয়: ইনলাইন ব্লক: স্প্যান একটি নতুন লাইন থেকে শুরু হয় না এবং শুধুমাত্র প্রয়োজনীয় হিসাবে যতটা প্রস্থ লাগে


প্রদর্শন: ব্লক মানে উপাদানটি একটি ব্লক হিসাবে প্রদর্শিত হয়, অনুচ্ছেদ এবং শিরোনাম সবসময় হয়েছে। একটি ব্লকের উপরে ও নীচে কিছু সাদা জায়গা আছে এবং এটির পাশে কোনও HTML উপাদান সহ্য করা হয় না, অন্যথায় আদেশ দেওয়া ছাড়া (অন্য উপাদানতে ফ্লোট ঘোষণাটি যোগ করে)।

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

প্রদর্শন বিকল্প সম্পর্কে আরও পড়ুন: http://www.quirksmode.org/css/display.html


বাধা

আগে এবং পরে একটি নতুন লাইন সহ উপলব্ধ পূর্ণ প্রস্থ আপ নেয় (প্রদর্শন: ব্লক;)

সারিতে

এটি প্রয়োজন হিসাবে যতটা প্রস্থ আপ লাগে, এবং নতুন লাইন জোর করে না (প্রদর্শন: ইনলাইন;)


ব্লক উপাদান : উপাদানগুলি div, p, শিরোনামগুলি ব্লক স্তরের পছন্দ করে। তারা নতুন লাইন থেকে শুরু করে এবং মূল উপাদানটির পূর্ণ প্রস্থ ধরে রাখে। ইনলাইন উপাদানসমূহ : উপাদানগুলিকে পছন্দ করা হয়েছে b, i, span, img ইনলাইন স্তরের। তারা নতুন লাইন থেকে শুরু করে এবং সামগ্রী প্রস্থে দখল করে না।





css