सीएसएस लेआउट - विस्तार और मैक्स-विस्तार

उपयोग करें width, max-width और margin: auto;

पिछले चापरे में बताया गया है कि ब्लॉक स्तर एलिमेंट हमेशा उपलब्ध संपूर्ण चौड़ाई को ले लेते हैं (जितना संभव हो सकता है बाईं और दाएँ ओर फैलते हैं)।

ब्लॉक स्तर एलिमेंट को चौड़ाई इससे यह अपने कंटेनर के किनारों तक फैलने से रोका जाएगा। फिर, आपको अनुबंध auto को सेट करके एलिमेंट को अपने कंटेनर में होगा। एलिमेंट निर्धारित चौड़ाई को ले लेगा और बाकी जगह दोनों मार्गिनों के बीच समान रूप से वितरित होगी:

इस <div> एलिमेंट की चौड़ाई 500px है और मार्गिन को auto सेट किया है。

ध्यान दें:जब ब्राउज़र विंडो की चौड़ाई एलिमेंट की चौड़ाई से कम होती है तो <div> समस्या होगी।ब्राउज़र ने पृष्ठ पर आड़ा स्क्रॉल बार जोड़ दिया होगा।

इस मामले में मैक्स-विडथ ब्राउज़र के लिए छोटे विंडो का संभाल करने के लिए बेहतरीन है।यह छोटे उपकरणों पर वेबसाइट के उपयोग के लिए महत्वपूर्ण है:

इस <div> एलेमेंट का अधिकतम विडथ 500px है, मार्गिन ऑटो सेट किया गया है。

सूचना:कृपया ब्राउज़र विंडो का आकार 500 पिक्सल से कम करें, ताकि दो डिव के बीच का अंतर देख सकें!

यह ऊपरी दो डिव का उदाहरण है:

इंस्टेंस

डिव.ex1 {
  विडथ: 500px;
  मार्गिन: ऑटो;
  बॉर्डर: 3px सॉलिड #73AD21;
}
डिव.ex2 {
  मैक्स-विडथ: 500px;
  मार्गिन: ऑटो;
  बॉर्डर: 3px सॉलिड #73AD21;
}

स्वयं प्रयोग करें