CSS लेआउट - चौड़ाई और अधिकतम-चौड़ाई
चौड़ाई, अधिकतम-चौड़ाई और मार्जिन का उपयोग करना: ऑटो;
जैसा कि पिछले अध्याय में बताया गया है; एक ब्लॉक-स्तरीय तत्व हमेशा उपलब्ध पूरी चौड़ाई लेता है (जहां तक यह बाएं और दाएं तक फैला हुआ है)।
एक ब्लॉक-स्तरीय तत्व की स्थापना widthइसे अपने कंटेनर के किनारों तक फैलने से रोकेगी। फिर, आप अपने कंटेनर के भीतर तत्व को क्षैतिज रूप से केंद्रित करने के लिए मार्जिन को ऑटो पर सेट कर सकते हैं। तत्व निर्दिष्ट चौड़ाई लेगा, और शेष स्थान दो मार्जिन के बीच समान रूप से विभाजित किया जाएगा:
नोट: उपरोक्त के साथ समस्या <div>तब होती है जब ब्राउज़र विंडो तत्व की चौड़ाई से छोटी होती है। ब्राउज़र तब पृष्ठ पर एक क्षैतिज स्क्रॉलबार जोड़ता है।
max-widthइसके बजाय, इस स्थिति में उपयोग करने से, ब्राउज़र की छोटी विंडो को संभालने में सुधार होगा। साइट को छोटे उपकरणों पर प्रयोग करने योग्य बनाते समय यह महत्वपूर्ण है:
युक्ति: दो divs के बीच अंतर देखने के लिए, ब्राउज़र विंडो का आकार 500px से कम चौड़ा करें!
यहाँ ऊपर दो divs का एक उदाहरण दिया गया है:
उदाहरण
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}