display সম্পত্তি একটি ওয়েবপেজ লেআউট অবিচ্ছেদ্য. ডিসপ্লে প্রপার্টি নির্ধারণ করে যে কীভাবে একটি উপাদান তার চারপাশের উপাদানগুলির সাথে সম্পর্কিত হবে। এই CSS সম্পত্তির জন্য বেশ কিছু মান আছে; সর্বাধিক ব্যবহৃত মানগুলির মধ্যে রয়েছে inline , block , এবং inline-block . এই নিবন্ধে আমরা এই তিনটি CSS ডিসপ্লে মানের মধ্যে বাস্তবায়ন এবং পার্থক্য নিয়ে আলোচনা করব।
সিনট্যাক্স
ডিসপ্লের যেকোনো CSS মান বাস্তবায়নের জন্য সিনট্যাক্স, সিনট্যাক্স নিম্নরূপ:
প্রদর্শন:মান;
এই নিবন্ধে, তিনটি মান হল ইনলাইন, ব্লক এবং ইনলাইন-ব্লক, তাই সিনট্যাক্স হবে:
প্রদর্শন:ইনলাইন;
প্রদর্শন:ব্লক;
প্রদর্শন:ইনলাইন-ব্লক;
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
ইনলাইন, ব্লক এবং ইনলাইন-ব্লক ডিসপ্লেগুলির মধ্যে পার্থক্য
ইনলাইন-ব্লক উপাদানগুলি কীভাবে তুলনা করে তা দেখার আগে ইনলাইন উপাদান এবং ব্লক উপাদানগুলি পর্যালোচনা করে শুরু করা যাক৷
ইনলাইন
ইনলাইন-স্তরের উপাদানগুলি ইনলাইনে প্রদর্শিত হয়, যার অর্থ এই উপাদান এবং অভিভাবক বা পূর্ববর্তী উপাদানগুলির মধ্যে কোনও লাইন বিরতি বা বিচ্ছেদ নেই৷ এটি শুধুমাত্র প্রয়োজনীয় প্রস্থ লাগে; আপনি যদি উপাদানটিতে কাস্টম প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি যোগ করার চেষ্টা করেন তবে বৈশিষ্ট্যগুলি উপেক্ষা করা হবে।
ডিফল্টরূপে ইনলাইনে প্রদর্শিত HTML উপাদানগুলির মধ্যে নিম্নলিখিতগুলি অন্তর্ভুক্ত রয়েছে:<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button> <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <output>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>
ব্লক করুন
ব্লক-স্তরের উপাদানগুলি একটি নতুন লাইনে প্রদর্শিত হয় এবং একটি প্রস্থের বৈশিষ্ট্য লেখা না থাকলে, সম্ভাব্য সমস্ত প্রস্থ গ্রহণ করে৷ ইনলাইন উপাদানগুলির বিপরীতে, আপনি যদি কাস্টম প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি যোগ করেন তবে সেই বৈশিষ্ট্যগুলিকে সম্মান করা হবে।
ডিফল্টরূপে ব্লক প্রদর্শিত HTML উপাদানগুলির মধ্যে নিম্নলিখিতগুলি অন্তর্ভুক্ত রয়েছে:<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>...<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>
ইনলাইন-ব্লক
এটি মাথায় রেখে, ইনলাইন-ব্লক উপাদানগুলি ইনলাইন এবং ব্লক উভয় উপাদানগুলির মধ্যে সেরাকে একত্রিত করে:ইনলাইন-ব্লকগুলি কাস্টম প্রস্থ এবং উচ্চতা বৈশিষ্ট্য যুক্ত করার ক্ষমতা সহ ইনলাইনে প্রদর্শিত হয়৷ আপনি যখন কোনও সাইটের প্রদর্শনের স্টাইল করতে চান এবং উপাদানগুলি পাশাপাশি বসতে চান তখন এটি তাদের আদর্শ করে তোলে।
উপসংহার
এই প্রবন্ধে, আমরা আলোচনা করেছি কিভাবে CSS ডিসপ্লে প্রপার্টির জন্য তিনটি মান বাস্তবায়ন করা যায়:ইনলাইন, ব্লক, এবং ইনলাইন-ব্লক, এবং ইনলাইন-লেভেল এবং ব্লক-লেভেল ডিসপ্লে ব্যবহার করার সুবিধা ও অসুবিধা। আপনি যদি এই নিবন্ধটি সহায়ক বলে মনে করেন তবে অন্যান্য নিবন্ধগুলি দেখুন:সিএসএস শিখুন:ক্যাসকেডিং স্টাইল শীট শেখার জন্য একটি নির্দেশিকা, বা সিএসএস শেখার জন্য আমাদের শিক্ষানবিস গাইড৷
আপনি যদি ফ্রন্ট-এন্ড ওয়েব ডেভেলপমেন্ট সম্পর্কে আরও জানতে চান, তাহলে সেরা প্রশিক্ষণ প্রোগ্রাম খুঁজে পেতে আজই আমাদের একজন কোচের সাথে কথা বলুন।
