सीएसएस बॉक्स साइजिंग
सीएसएस बॉक्स साइजिंग
CSS box-sizingगुण हमें किसी तत्व की कुल चौड़ाई और ऊंचाई में पैडिंग और बॉर्डर को शामिल करने की अनुमति देता है।
CSS बॉक्स-साइज़िंग प्रॉपर्टी के बिना
डिफ़ॉल्ट रूप से, किसी तत्व की चौड़ाई और ऊंचाई की गणना इस प्रकार की जाती है:
चौड़ाई + पैडिंग + बॉर्डर = किसी तत्व की वास्तविक चौड़ाई
ऊँचाई + पैडिंग + बॉर्डर = किसी तत्व की वास्तविक ऊँचाई
इसका मतलब है: जब आप किसी तत्व की चौड़ाई/ऊंचाई सेट करते हैं, तो तत्व अक्सर आपके द्वारा सेट किए गए से बड़ा दिखाई देता है (क्योंकि तत्व की सीमा और पैडिंग तत्व की निर्दिष्ट चौड़ाई/ऊंचाई में जोड़ दी जाती है)।
निम्नलिखित उदाहरण दो <div> तत्वों को समान निर्दिष्ट चौड़ाई और ऊंचाई के साथ दिखाता है:
उपरोक्त दो <div> तत्व परिणाम में विभिन्न आकारों के साथ समाप्त होते हैं (क्योंकि div2 में एक पैडिंग निर्दिष्ट है):
उदाहरण
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
संपत्ति इस box-sizingसमस्या को हल करती है।
CSS बॉक्स-साइज़िंग प्रॉपर्टी के साथ
box-sizingसंपत्ति हमें तत्व की कुल चौड़ाई और ऊंचाई में पैडिंग और सीमा को शामिल करने की अनुमति देती है ।
यदि आप box-sizing: border-box;किसी तत्व पर सेट करते हैं, तो चौड़ाई और ऊंचाई में पैडिंग और बॉर्डर शामिल होते हैं:
यहां ऊपर जैसा ही उदाहरण दिया गया है, जिसमें box-sizing: border-box;
दोनों <div> तत्वों को जोड़ा गया है:
उदाहरण
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
चूंकि का उपयोग करने का परिणाम box-sizing: border-box;बहुत बेहतर है, कई डेवलपर्स चाहते हैं कि उनके पृष्ठों के सभी तत्व इस तरह से काम करें।
नीचे दिया गया कोड सुनिश्चित करता है कि सभी तत्व इस अधिक सहज तरीके से आकार में हैं। कई ब्राउज़र पहले से ही box-sizing: border-box;कई फॉर्म तत्वों के लिए उपयोग करते हैं (लेकिन सभी नहीं - यही कारण है कि इनपुट और टेक्स्ट क्षेत्र चौड़ाई पर अलग दिखते हैं: 100%;)।
इसे सभी तत्वों पर लागू करना सुरक्षित और बुद्धिमानी है:
उदाहरण
* {
box-sizing: border-box;
}
सीएसएस बॉक्स आकार देने वाली संपत्ति
| Property | Description |
|---|---|
| box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |