Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> CSS

CSS3 मल्टी-कॉलम कॉलम-गैप प्रॉपर्टी

<घंटा/>

कॉलम के बीच गैप तय करने के लिए मल्टी-कॉलम कॉलम-गैप प्रॉपर्टी का इस्तेमाल किया जाता है।

उदाहरण

आप कॉलम-गैप प्रॉपर्टी को लागू करने के लिए निम्न कोड को चलाने का प्रयास कर सकते हैं

<html>
   <head>
      <style>
         .multi {
            /* Column count property */
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;
           
            /* Column gap property */
            -webkit-column-gap: 40px;
            -moz-column-gap: 40px;
            column-gap: 40px;
           
            /* Column style property */
            -webkit-column-rule-style: solid;
            -moz-column-rule-style: solid;
            column-rule-style: solid;
         }
      </style>
   </head>
   <body>
      <div class = "multi">
         Tutorials Point originated from the idea that there exists a class of readers who respond
         better to online content and prefer to learn new skills at their own pace from the comforts
         of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and
         elated by the response it generated, we worked our way to adding fresh tutorials to our
         repository which now proudly flaunts a wealth of tutorials and allied articles on topics
         ranging from programming languages to web designing to academics and much more.
      </div>
   </body>
</html>

आउटपुट

CSS3 मल्टी-कॉलम कॉलम-गैप प्रॉपर्टी


  1. CSS3 मल्टी-कॉलम कॉलम-नियम प्रॉपर्टी

    नियमों की संख्या निर्दिष्ट करने के लिए बहु-स्तंभ-स्तंभ-नियम गुण का उपयोग किया जाता है। आप CSS3 में कॉलम-नियम प्रॉपर्टी को लागू करने के लिए निम्न कोड चलाने का प्रयास कर सकते हैं - उदाहरण <html>    <head>       <style>          .mult

  1. CSS3 मल्टी-कॉलम कॉलम-गिनती संपत्ति

    CSS3 मल्टी-कॉलम कॉलम-काउंट प्रॉपर्टी का उपयोग उन कॉलमों की संख्या को गिनने के लिए किया जाता है, जिन्हें एलिमेंट को विभाजित किया जाना चाहिए। आप CSS का उपयोग करके कॉलम-काउंट प्रॉपर्टी को लागू करने के लिए निम्न कोड को चलाने का प्रयास कर सकते हैं - उदाहरण <html>    <head>   &

  1. CSS3 ट्रांज़िशन शॉर्टहैंड प्रॉपर्टी

    ट्रांज़िशन शॉर्टहैंड प्रॉपर्टी हमें ट्रांज़िशन-प्रॉपर्टी, ट्रांज़िशन-अवधि, ट्रांज़िशन-टाइमिंग फ़ंक्शन और ट्रांज़िशन-देरी को एक लाइन में ट्रांज़िशन प्रॉपर्टी के मान के रूप में निर्दिष्ट करने की अनुमति देती है। CSS में ट्रांज़िशन शॉर्टहैंड प्रॉपर्टी के लिए कोड निम्नलिखित है - उदाहरण <!DOCTYPE html