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