CSS बॉक्स-साइज़िंग संपत्ति
उदाहरण
तत्व की कुल चौड़ाई और ऊंचाई में पैडिंग और बॉर्डर शामिल करें:
#example1 {
box-sizing: border-box;
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
संपत्ति परिभाषित करती है कि किसी तत्व की चौड़ाई और ऊंचाई की गणना कैसे की box-sizing
जाती है: क्या उनमें पैडिंग और बॉर्डर शामिल हैं या नहीं।
डिफ़ॉल्ट मान: | सामग्री बॉक्स |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | नहीं। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | CSS3 |
जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.boxSizing="border-box" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
-वेबकिट- या -मोज़ के बाद की संख्याएं- पहले संस्करण को निर्दिष्ट करें जो उपसर्ग के साथ काम करता है।
Property | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
सीएसएस सिंटेक्स
box-sizing: content-box|border-box|initial|inherit;
सम्पत्ति की कीमत
Value | Description |
---|---|
content-box | Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included |
border-box | The width and height properties (and min/max properties) includes content, padding and border |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
और ज्यादा उदाहरण
उदाहरण
दो बॉर्डर वाले बक्सों को साथ-साथ निर्दिष्ट करें:
div
{
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
उदाहरण
"सार्वभौमिक बॉक्स-आकार" सेट करें:
* {
box-sizing: border-box;
}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस बॉक्स साइजिंग
HTML DOM संदर्भ: बॉक्ससाइज़िंग प्रॉपर्टी