CSS3-এ কলাম মাঝপথে গ্যাপ সেট করার জন্য column-gap প্রপার্টি ব্যবহার করুন।
column-gap: length | normal | initial | inherit;
উদাহরণ ১: ২৫পিক্স গ্যাপ
<!DOCTYPE html> <html> <head> <style> .demo { column-count: 4; -webkit-column-count: 4; -moz-column-count: 4; -webkit-column-gap: 25px; -moz-column-gap: 25px; 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... </div> </body> </html>
আউটপুট
উদাহরণ ২: normal গ্যাপ (ব্রাউজার ডিফল্ট)
<!DOCTYPE html> <html> <head> <style> .demo { column-count: 2; -webkit-column-count: 2; -moz-column-count: 2; -webkit-column-gap: normal; -moz-column-gap: normal; 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... </div> </body> </html>
আউটপুট
মানগুলো
- length: নির্দিষ্ট দূরত্ব (px, em, rem, cm ইত্যাদি)
- normal: ব্রাউজার ডিফল্ট (সাধারণত ১em)
- initial/inherit: স্ট্যান্ডার্ড CSS মান
শর্টহ্যান্ড: columns প্রপার্টিতে গ্যাপ অন্তর্ভুক্ত নয়। আলাদা column-gap ব্যবহার করুন।
