सीएसएस चौड़ाई संपत्ति
उदाहरण
तीन <div> तत्वों की चौड़ाई निर्धारित करें:
div.a {
width: auto;
border: 1px
solid black;
}
div.b {
width: 150px;
border: 1px solid black;
}
div.c {
width:
50%;
border: 1px solid black;
}
नीचे और अधिक "इसे स्वयं आज़माएं" उदाहरण।
परिभाषा और उपयोग
संपत्ति तत्व की width
चौड़ाई निर्धारित करती है।
किसी तत्व की चौड़ाई में पैडिंग, बॉर्डर या मार्जिन शामिल नहीं है!
नोट: न्यूनतम -चौड़ाई और
अधिकतम-चौड़ाई गुण संपत्ति को ओवरराइड करते width
हैं।
डिफ़ॉल्ट मान: | ऑटो |
---|---|
विरासत में मिला: | नहीं |
एनिमेटेबल: | हां। एनिमेटेबल के बारे में पढ़ें |
संस्करण: | सीएसएस 1 |
जावास्क्रिप्ट सिंटैक्स: | ऑब्जेक्ट .style.width="500px" |
ब्राउज़र समर्थन
तालिका में संख्याएं पहले ब्राउज़र संस्करण को निर्दिष्ट करती हैं जो पूरी तरह से संपत्ति का समर्थन करता है।
Property | |||||
---|---|---|---|---|---|
width | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
सीएसएस सिंटेक्स
width: auto|value|initial|inherit;
सम्पत्ति की कीमत
Value | Description | Play it |
---|---|---|
auto | Default value. The browser calculates the width | |
length | Defines the width in px, cm, etc. Read about length units | |
% | Defines the width in percent of the containing block | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
और ज्यादा उदाहरण
उदाहरण
प्रतिशत मान का उपयोग करके <img> तत्व की चौड़ाई निर्धारित करें:
img {
width: 50%;
}
उदाहरण
<input type="text"> तत्व की चौड़ाई को 100px पर सेट करें। हालाँकि, जब यह फ़ोकस हो जाता है, तो इसे 250px चौड़ा करें:
input[type=text] {
width: 100px;
}
input[type=text]:focus {
width: 250px;
}
संबंधित पृष्ठ
सीएसएस ट्यूटोरियल: सीएसएस ऊंचाई और चौड़ाई
सीएसएस ट्यूटोरियल: सीएसएस बॉक्स मॉडल
सीएसएस संदर्भ: ऊंचाई संपत्ति
एचटीएमएल डोम संदर्भ: चौड़ाई संपत्ति