जब आप CSS के साथ किसी भी स्तर की जटिल वेबसाइट लेआउट को स्टाइल कर रहे होते हैं (एक साधारण आर्टिकल लेआउट से आगे), तो चीजें तेजी से गड़बड़ हो सकती हैं। यह अक्सर विभिन्न लेआउट समस्याओं का कारण बनता है।
सबसे आम CSS लेआउट समस्याओं में से कुछ हैं:
- ओवरलैपिंग एलिमेंट्स (अक्सर ओवरफ्लो इश्यू)
- कॉलेप्सिंग एलिमेंट्स (अक्सर मार्जिन इश्यू)
- अतिरिक्त व्हाइट स्पेस (कई चीजें इसका कारण बन सकती हैं)
अपने लेआउट की समस्याओं के बारे में तुरंत विजुअल संकेत प्राप्त करने का एक सरल तरीका है CSS के यूनिवर्सल सेलेक्टर * का उपयोग करके अपने सभी HTML एलिमेंट्स के चारों ओर बॉर्डर जोड़ना।
अपनी CSS स्टाइलशीट के शीर्ष पर यह जोड़ें:
* { border: 1px solid red; }मैंने इसे अपनी वेबसाइट पर किया और तुरंत पहचान लिया कि मेरे लेआउट को कुछ समायोजन की आवश्यकता हो सकती है।
यहां तक कि अगर आपके लेआउट में कोई विजुअल समस्या नहीं है, तो यह बॉर्डर ट्रिक उन चीजों को उजागर करने या इंगित करने में मदद कर सकती है जो भविष्य में समस्याओं का कारण बन सकती हैं।
संपादन
यह outline प्रॉपर्टी के साथ भी किया जा सकता है border प्रॉपर्टी के बजाय। यह एक बेहतर समाधान हो सकता है क्योंकि आउटलाइन स्पेस नहीं लेते हैं।
