আপনি যখন CSS দিয়ে জটিল ওয়েবসাইট লেআউটের যেকোন স্তরের স্টাইল করছেন (একটি সাধারণ নিবন্ধ লেআউটের বাইরে) জিনিসগুলি দ্রুত অগোছালো হতে পারে। এটি প্রায়শই বিভিন্ন লেআউট সমস্যার দিকে পরিচালিত করে।
কিছু সাধারণ CSS লেআউট সমস্যা হল:
- ওভারল্যাপিং উপাদান (প্রায়ই একটি ওভারফ্লো সমস্যা)
- কোলাপিং উপাদান (প্রায়শই একটি মার্জিন সমস্যা)
- অতিরিক্ত সাদা স্থান (অনেক কিছু এর কারণ হতে পারে)
আপনার লেআউট সমস্যা সম্পর্কে তাত্ক্ষণিক ভিজ্যুয়াল ইঙ্গিত পাওয়ার একটি সহজ উপায় হল CSS এর সার্বজনীন নির্বাচক ব্যবহার করে আপনার সমস্ত HTML উপাদানের চারপাশে সীমানা যোগ করা \*
আপনার CSS স্টাইলশীটের শীর্ষে এটি যোগ করুন:
\* {
border: 1px solid red;
}
আমি আমার নিজের ওয়েবসাইটে এটি করেছি এবং অবিলম্বে স্বীকৃত যে আমার লেআউটে কিছু সমন্বয় প্রয়োজন হতে পারে৷
৷এমনকি আপনার লেআউটে কোনো ভিজ্যুয়াল সমস্যা না থাকলেও, এই বর্ডার ট্রিকটি এমন জিনিসগুলিকে প্রকাশ করতে বা নির্দেশ করতে সাহায্য করতে পারে যা রাস্তার নিচে সমস্যা হতে পারে।
সম্পাদনা করুন
এটি outline
দিয়েও করা যেতে পারে সীমান্ত সম্পত্তির পরিবর্তে সম্পত্তি। এটি একটি ভাল সমাধান হতে পারে কারণ রূপরেখাগুলি স্থান নেয় না৷