সিএসএস(৩) column-gap প্রোপার্টি
ব্রাউজার সাপোর্ট
| property | Google Chrome | Edge | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
| column-gap | ৫০.০ ৪.০ -webkit- |
১০.০ | ২.০ -moz- | ৯.০ ৩.১ -webkit- |
৩৭.০ ১৫.০ -webkit ১১.১ |
সংজ্ঞা ও ব্যবহার
column-gap প্রোপার্টি কলামের মধ্যে যে ফাঁকা স্থান থাকে তা নির্ধারন করে।
পরামর্শঃ
- যদি কলামের মধ্যে কোন কলাম রুল থাকে তবে ইহা ফাঁকা স্থানের মাঝামাঝি দেখাবে।
| Initial Value: | Inherited: | Animatable: |
|---|---|---|
| normal | না | হ্যাঁ । আরোও জানতে animatable অধ্যায় ভিজিট করুন। animatableএর উদাহরণ |
সিএসএস সিনট্যাক্স
column-gap: length/normal/initial/inherit;
দুইটি কলামের মাঝে দূরত্ব নির্ধারন করেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
<style>
.text {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
</style>
</head>
<body>
<div class="text">
কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারের
ডিজিটাল হিসাবে দেখতে চাইলে সরকারের সহিত আমাদেরকেও সমানভাবে এগিয়ে আসতে
হবে, এবং কম্পিউটার শিক্ষা অর্জন করতে হবে। কিন্তু আমরা জেলাশহরে থাকার কারণে
এবং রাজধানী ঢাকা আমাদের থেকে অনেক দুরে অথবা অার্থিক কারণে আমরা যেমন
ওয়েব ডিজাইন এবং ডেভেলোপমেন্ট/এন্ড্রয়েড/ আই ও এস অ্যাপ্স তৈরির কথা চিন্তাও
করতে পারিনা। এসব সমস্যার সমাধান হিসাবে স্যাট -এর জন্ম। স্যাট একাডেমী সম্পূর্ণ
বিনামূল্যে ওয়েব ডিজাইন এবং ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।
</div>
<p><b>নোটঃ</b> ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সনগুলো column-gap প্রোপার্টি
সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
জাভাস্ক্রিপ্ট সিনট্যাক্স
object.style.columnGap="50px"উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
<style>
#thisDiv {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
</style>
</head>
<body>
<p>Div এলিমেন্টের প্রতিটি কলামের পরে 40px দুরত্ব দেখতে "ক্লিক করি" বাটনে ক্লিক করুনঃ</p>
<button onclick="myFunction()">ক্লিক করি</button><br><br>
<div id="thisDiv">
কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারের
ডিজিটাল হিসাবে দেখতে চাইলে সরকারের সহিত আমাদেরকেও সমানভাবে এগিয়ে আসতে
হবে, এবং কম্পিউটার শিক্ষা অর্জন করতে হবে। কিন্তু আমরা জেলাশহরে থাকার কারণে
এবং রাজধানী ঢাকা আমাদের থেকে অনেক দুরে অথবা অার্থিক কারণে আমরা যেমন
ওয়েব ডিজাইন এবং ডেভেলোপমেন্ট/এন্ড্রয়েড/ আই ও এস অ্যাপ্স তৈরির কথা চিন্তাও
করতে পারিনা। এসব সমস্যার সমাধান হিসাবে স্যাট -এর জন্ম। স্যাট একাডেমী সম্পূর্ণ
বিনামূল্যে ওয়েব ডিজাইন এবং ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।
</div>
<script>
function myFunction() {
document.getElementById("thisDiv").style.WebkitColumnGap = "40px"; // Code for Chrome, Safari, and Opera
document.getElementById("thisDiv").style.MozColumnGap = "40px"; // Code for Firefox
document.getElementById("thisDiv").style.columnGap = "40px";
}
</script>
</body>
</html>
ফলাফল
Column-rule
কলামের মধ্যে width,style,color নির্ধারন করে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস রেফারেন্স উদাহরণ</title>
<style>
.text {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule: 1px solid teal; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid teal; /* Firefox */
column-rule: 1px solid teal;
}
</style>
</head>
<body>
<div class="text">
কম্পিউটার শিক্ষা বর্তমান সময়ের দাবি। যা ডিজিটালের সিড়ি। তাই দেশকে সত্যিকারের
ডিজিটাল হিসাবে দেখতে চাইলে সরকারের সহিত আমাদেরকেও সমানভাবে এগিয়ে আসতে
হবে, এবং কম্পিউটার শিক্ষা অর্জন করতে হবে। কিন্তু আমরা জেলাশহরে থাকার কারণে
এবং রাজধানী ঢাকা আমাদের থেকে অনেক দুরে অথবা অার্থিক কারণে আমরা যেমন
ওয়েব ডিজাইন এবং ডেভেলোপমেন্ট/এন্ড্রয়েড/ আই ও এস অ্যাপ্স তৈরির কথা চিন্তাও
করতে পারিনা। এসব সমস্যার সমাধান হিসাবে স্যাট -এর জন্ম। স্যাট একাডেমী সম্পূর্ণ
বিনামূল্যে ওয়েব ডিজাইন এবং ডেভেলোপমেন্টের উপর প্রশিক্ষণ দিচ্ছে।
</div>
<p><b>নোটঃ</b> ইন্টারনেট এক্সপ্লোরার ৯ এবং পূর্বের ভার্সনগুলো column-rule প্রোপার্টি
সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
column-gap প্রোপার্টির ভ্যালু-সমূহ
- length - কলামের মধ্যে ফাঁকা স্থানের দূরত্ব নির্ধারন করে।
- normal - এটি একাধিক কলামের মধ্যে ডিফল্টভাবে কিছু জায়গা ফাঁকা রাখে।
- initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
- inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়। আরও জানতে inherit অধ্যায় ভিজিট করুন।
column-gap প্রোপার্টির ভ্যালু-সমুহের ব্যবহার দেখার জন্য স্ব-স্ব ভ্যালুতে ক্লিক করুন।