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

CSS3 का उपयोग करके कॉलम गैप सेट करना

<घंटा/>

CSS3 का उपयोग करके कॉलम गैप सेट करने के लिए, कॉलम-गैप प्रॉपर्टी का उपयोग करें। आप मानों को −

. के रूप में सेट कर सकते हैं
column-gap: length|normal|initial|inherit;

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   column-count: 4;
   -webkit-column-count: 4; /* Chrome, Safari, Opera */
   -moz-column-count: 4; /* Firefox */
   -webkit-column-gap: 25px; /* Chrome, Safari, Opera */
   -moz-column-gap: 25px; /* Firefox */
   column-gap: 25px;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. 
This is due to the fact that huge computing resources are easily available to the common man. 
The developers now take advantage of this in creating new Machine Learning models and to re-train 
the existing models for better performance and results. The easy availability of High Performance 
Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>

आउटपुट

CSS3 का उपयोग करके कॉलम गैप सेट करना

उदाहरण

आइए अब एक और उदाहरण देखें -

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   column-count: 2;
   -webkit-column-count: 2; /* Chrome, Safari, Opera */
   -moz-column-count: 2; /* Firefox */
   -webkit-column-gap: normal; /* Chrome, Safari, Opera */
   -moz-column-gap: normal; /* Firefox */
   column-gap: normal;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>

आउटपुट

CSS3 का उपयोग करके कॉलम गैप सेट करना


  1. CSS3 का उपयोग करके पारदर्शी बॉक्स में टेक्स्ट

    CSS3 के साथ पारदर्शी बॉक्स में टेक्स्ट सेट करने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .transparentBox {    background: url("https://i

  1. CSS3 का उपयोग करके तत्वों का 2D परिवर्तन

    2डी ट्रांस्फ़ॉर्म का उपयोग एलिमेंट स्ट्रक्चर को ट्रांसलेट, रोटेट, स्केल और स्क्यू के रूप में फिर से बदलने के लिए किया जाता है। कुछ 2D ट्रांसफ़ॉर्म फ़ंक्शन निम्नलिखित हैं - क्रमांक मूल्य और विवरण 1 मैट्रिक्स(एन,एन,एन,एन,एन,एन) छह मानों के साथ मैट्रिक्स रूपांतरण को परिभाषित करने के लिए प्रयुक

  1. CSS3 का उपयोग करके वर्ड ब्रेकिंग नियम निर्दिष्ट करें

    CSS3 में वर्ड ब्रेकिंग नियम निर्दिष्ट करने के लिए, वर्ड-ब्रेक प्रॉपर्टी का उपयोग करें। इस गुण का उपयोग रेखा को तोड़ने के लिए किया जाता है। संभावित मूल्यों में सामान्य, ब्रेक-ऑल, कीप-ऑल, ब्रेक-वर्ड, आदि शामिल हैं। CSS3 का उपयोग करते हुए वर्ड ब्रेकिंग नियमों को निर्दिष्ट करने के लिए कोड निम्नलिखित है