আপনার মার্জিন এবং সীমানা জিরো আউট সিএসএস ব্যবহার করুন

আজকের ওয়েব ব্রাউজার পাগল দিন থেকে একটি দীর্ঘ পথ এসেছিল যেখানে ক্রস-ব্রাউজারের যেকোন ধরনের ক্রমাগত চিন্তাভাবনা ছিল। আজকের ওয়েব ব্রাউজারগুলি সবগুলি মান-সম্মত। তারা সুন্দরভাবে একসঙ্গে খেলা করে এবং বিভিন্ন ব্রাউজারে একটি মোটামুটি সঙ্গতিপূর্ণ পৃষ্ঠা প্রদর্শন করে। এটি গুগল ক্রোম, মাইক্রোসফট এজ, মোজিলা ফায়ারফক্স, অপেরা, সাফারি এবং মোবাইল ব্রাউজারের অপ্রত্যাশিত বিভিন্ন ব্রাউজারের সর্বশেষ ভার্সনে রয়েছে।

যখন ওয়েব ব্রাউজারে আসে এবং কিভাবে তারা সিএসএস প্রদর্শন করে তখন অবশ্যই অগ্রগতিটি তৈরি করা হয়, এই সফ্টওয়্যারের বিভিন্ন বিকল্পগুলির মধ্যে এখনও অসঙ্গতি রয়েছে। সাধারণ অসঙ্গতি এক হল যেগুলি ব্রাউজারগুলি মূলত মার্জিন, প্যাডিং এবং সীমানা গণনা করে।

বক্স মডেল প্রভাব এই এইচটিএমএল উপাদান সব কারণের, এবং তারা পৃষ্ঠার লেআউট তৈরি করার জন্য অপরিহার্য কারণ, একটি অসঙ্গত প্রদর্শন একটি পৃষ্ঠা একটি ব্রাউজারের মধ্যে মহান দেখতে পারে, কিন্তু অন্য মধ্যে সামান্য বন্ধ চেহারা এই সমস্যাটি মোকাবেলা করার জন্য, অনেক ওয়েব ডিজাইনার বক্স মডেলের এই দিকগুলিকে সাধারণ করে। এই অনুশীলনটি মার্জিন, প্যাডিং এবং সীমানাগুলির মানগুলি "শূন্য আউট" হিসাবেও পরিচিত।

ব্রাউজার ডিফল্টগুলির উপর একটি নোট

ওয়েব ব্রাউজারের একটি নির্দিষ্ট পৃষ্ঠার নির্দিষ্ট প্রদর্শনের দিকনির্দেশের জন্য ডিফল্ট সেটিং রয়েছে। উদাহরণস্বরূপ, হাইপারলিঙ্কগুলি নীল এবং ডিফল্টভাবে নিম্নরেখাঙ্কিত। এটি বিভিন্ন ব্রাউজার জুড়ে সামঞ্জস্যপূর্ণ, এবং যদিও এটি এমন কিছু বিষয় যা অধিকাংশ ডিজাইনার তাদের নির্দিষ্ট প্রজেক্টের ডিজাইনের চাহিদা অনুসারে পরিবর্তিত হয়, সত্য যে তারা সবাই একই ডিফল্ট থেকে শুরু করে এই পরিবর্তনগুলি করা সহজ করে তোলে। দুর্ভাগ্যবশত, মার্জিন, প্যাডিং এবং সীমানাগুলির জন্য ডিফল্ট মান ক্রস-ব্রাউজার সামঞ্জস্যের একই স্তরের উপভোগ করেন না।

মার্জিন এবং প্যাডিং জন্য মান সাধারণকরণ

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

* {মার্জিন: 0; প্যাডিং: 0; }

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

আরেকটি বিকল্প এইচটিএমএল এবং শরীরের উপাদান এই মান প্রয়োগ করা হয়। যেহেতু আপনার পৃষ্ঠার অন্যান্য সমস্ত উপাদানগুলি এই দুটি উপাদানের সন্তান হবে, সেহেতু সিএসএস ক্যাশেড এই সমস্ত অন্যান্য উপাদানের জন্য এই মানগুলি প্রয়োগ করা উচিত।

html, শরীর {মার্জিন: 0; প্যাডিং: 0; }

এটি আপনার ব্রাউজারে একই জায়গায় আপনার নকশা শুরু করবে, কিন্তু এক জিনিস মনে রাখতে হবে যে একবার আপনি সমস্ত মার্জিন এবং প্যাডিং বন্ধ করুন, আপনি আপনার ওয়েব পৃষ্ঠার নির্দিষ্ট অংশগুলির জন্য চেহারাটি বেছে নেওয়ার জন্য নির্বাচনযোগ্যভাবে তাদের পিছনে পরিণত করতে হবে। এবং আপনার নকশা জন্য কল মনে হয়।

সীমানা

আপনি হয়তো মনে করতে পারেন "তবে কোনও ব্রাউজারের ডিফল্ট অনুসারে শরীরের অঙ্গের সীমান্ত নেই"। এটি কঠোরভাবে সত্য নয়। ইন্টারনেট এক্সপ্লোরারের পুরোনো সংস্করণগুলি উপাদানের কাছাকাছি একটি স্বচ্ছ বা অদৃশ্য সীমানা আছে। আপনি সীমানা সেট 0 পর্যন্ত, সীমানাটি আপনার পৃষ্ঠার লেআউটগুলি জর্জরিত করতে পারে। আপনি যদি এই সিদ্ধান্ত নিয়ে থাকেন যে আপনি IE এর এই প্রাচীন সংস্করণগুলির সমর্থন অব্যাহত রাখবেন, তাহলে আপনাকে আপনার শরীর এবং এইচটিএমএল স্টাইলগুলি নিম্নোক্ত দ্বারা যুক্ত করতে হবে:

এইচটিএমএল, শরীর {
মার্জিন: 0 পিএক্স;
প্যাডিং: 0 পিএক্স;
সীমানা: 0 পিএক্স;
}

আপনি মার্জিন এবং প্যাডিং বন্ধ কিভাবে অনুরূপ, এই নতুন শৈলী এছাড়াও ডিফল্ট সীমানা বন্ধ হবে। আপনি নিবন্ধে পূর্বে দেখানো ওয়াইল্ডকার্ড নির্বাচক ব্যবহার করে একই জিনিস করতে পারে।

জনিফার ক্রাইনিনের মূল রচনা 9/27/16 তারিখে জেরেমি গিয়ার্ড দ্বারা সম্পাদিত