CSS इनलाइन-साइज प्रभाव

परिभाषा और उपयोग

inline-size गुण एलीमेंट को इनलाइन दिशा पर आकार को निर्दिष्ट करता है。

ध्यान दें:संबंधित CSS गुण writing-mode इनलाइन दिशा को परिभाषित करता है, जो इसे प्रभावित करेगा inline-size गुण के परिणाम के रूप में प्रदर्शित होते हैं. अंग्रेजी पृष्ठ के लिए, इनलाइन दिशा दाएँ से बाएँ है और ब्लॉक दिशा नीचे है。

CSS के inline-size और block-size गुण CSS के width और height गुण बहुत कुछ अच्छा उससे मिलते-जुलते हैं, लेकिन inline-size और block-size गुण इनलाइन और ब्लॉक दिशा पर निर्भर करता है。

उदाहरण

उदाहरण 1

<div> एलीमेंट को इनलाइन दिशा में आकार सेट करें:

div {
  inline-size: 200px;
}

अपने आप प्रयोग करें

उदाहरण 2

जब <div> एलीमेंट का writing-mode गुण मूल्य को सेट करें vertical-rl के समय, इनलाइन दिशा होगी सीधा और विराला नीचे बदल जाएगा, जो इसे प्रभावित करेगा inline-size गुण के काम करने के तरीका:

div {
  inline-size: 250px;
  writing-mode: vertical-rl;
}

अपने आप प्रयोग करें

CSS व्याकरण

inline-size: auto|length|initial|inherit;

गुण मूल्य

मूल्य वर्णन
auto मूलभूत मूल्य. एलीमेंट के इनलाइन-size का मूलभूत मूल्य
length

इनलाइन दिशा के आकार को निर्दिष्ट करें, इकाई के रूप में px, pt, cm आदि का इस्तेमाल करें。

नकारात्मक मूल्यों के इस्तेमाल की अनुमति है. देखें:सीएसएस इकाई。
% पारंपरिक आकार के प्रतिशत में इस गुण को निर्दिष्ट करें, जो पारंपरिक आकार के आधार पर प्रयोग किया जाता है。
initial इस गुण को उसके मूलभूत मूल्य पर सेट करें. देखें: initial。
inherit इस गुण को उसके माता एलीमेंट से विरासत में ले लें. देखें: inherit。

तकनीकी विवरण

मूलभूत मूल्य: auto
विरासतीयता: नहीं
एनिमेशन निर्माण: समर्थित. देखें:एनिमेशन संबंधी गुण。
संस्करण: CSS3
JavaScript व्याकरण: object.style.inlineSize="250px"

ब्राउज़र समर्थन

तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण के रूप में प्रदर्शित करते हैं。

Chrome Edge Firefox Safari Opera
57.0 79.0 41.0 12.1 44.0

संबंधित पृष्ठ

CSS शिक्षा:CSS ऊंचाई और चौडाई

CSS शिक्षा:CSS फ्रेम मॉडल

CSS संदर्भ:height गुण

CSS संदर्भ:width गुण

CSS संदर्भ:writing-mode प्रभाव