CSS border-spacing property

By /

CSS বর্ডার-স্পেসিং প্রপার্টি

এই CSS বৈশিষ্ট্যটি টেবিলের সংলগ্ন ঘরগুলির সীমানার মধ্যে দূরত্ব সেট করতে ব্যবহৃত হয়। এটি শুধুমাত্র তখনই প্রযোজ্য হয় যখন বর্ডার-কলেপস প্রপার্টি আলাদা করা হয়। সীমানা-পতনের জন্য সীমানা নির্ধারণ করা হলে সীমানাগুলির মধ্যে কোনও ফাঁকা থাকবে না।

এটি উল্লম্ব এবং অনুভূমিক ব্যবধান নির্ধারণের জন্য এক বা দুটি মান হিসাবে সংজ্ঞায়িত করা যেতে পারে।

  •  
  • যখন শুধুমাত্র একটি মান নির্দিষ্ট করা হয়, তখন এটি অনুভূমিক এবং উল্লম্ব উভয় ব্যবধান সেট করে।
  • যখন আমরা দুই-মান সিনট্যাক্স ব্যবহার করি, তখন প্রথমটি অনুভূমিক ব্যবধান (অর্থাৎ, সংলগ্ন কলামগুলির মধ্যে স্থান) সেট করতে ব্যবহৃত হয় এবং দ্বিতীয় মানটি উল্লম্ব ব্যবধান (অর্থাৎ, সন্নিহিত সারির মধ্যে স্থান) সেট করে।

বাক্য গঠন

  1. border-spacing: length | initial | inherit;  

সম্পত্তি মান

এই CSS সম্পত্তির মান নিম্নরূপ সংজ্ঞায়িত করা হয়.

দৈর্ঘ্য: এই মানটি px, cm, pt, ইত্যাদিতে সংলগ্ন টেবিল ঘরগুলির সীমানার মধ্যে দূরত্ব সেট করে৷ নেতিবাচক মান অনুমোদিত নয়৷

প্রাথমিক: এটি সম্পত্তিটিকে তার ডিফল্ট মান নির্ধারণ করে।

inherit: এটি তার মূল উপাদান থেকে সম্পত্তি উত্তরাধিকারসূত্রে পায়।

আসুন কিছু উদাহরণ ব্যবহার করে এই CSS বৈশিষ্ট্যটি বুঝতে পারি। প্রথম উদাহরণে, আমরা বর্ডার-স্পেসিং সম্পত্তির একক মান ব্যবহার করছি এবং দ্বিতীয় উদাহরণে, আমরা বর্ডার-স্পেসিং সম্পত্তির দুটি মান ব্যবহার করছি।

উদাহরণ

এখানে, আমরা বর্ডার-স্পেসিং সম্পত্তির একক মান ব্যবহার করছি। বর্ডার-কলেপস প্রপার্টি আলাদা করতে সেট করা হয়েছে, এবং বর্ডার-স্পেসিংয়ের মান 45px সেট করা হয়েছে।

  1. >  
  2. <html>   
  3. <head>  
  4. <title> border-spacing property title>  
  5. <style>  
  6. table{  
  7. border: 2px solid blue;  
  8. text-align: center;  
  9. font-size: 20px;  
  10. background-color: lightgreen;  
  11. }  
  12. th{  
  13. border: 5px solid red;  
  14. background-color: yellow;  
  15. }  
  16. td{  
  17. border: 5px solid violet;  
  18. background-color: cyan;  
  19. }  
  20. #space{  
  21. border-collapse: separate;  
  22. border-spacing: 45px;  
  23. }  
  24. </style>  
  25. </head>    
  26. <body>    
  27. <h1> The border-spacing Property h1>  
  28. <h2> border-spacing: 45px; h2>  
  29. <table id = “space”>  
  30. <tr>  
  31. <th> First_Name th>  
  32. <th> Last_Name th>  
  33. <th> Subject th>  
  34. <th> Marks th>  
  35. </tr>  
  36. <tr>  
  37. <td> James td>  
  38. <td> Gosling td>  
  39. <td> Maths td>  
  40. <td> 92 td>  
  41. </tr>  
  42. <tr>  
  43. <td> Alan td>  
  44. <td> Rickman td>  
  45. <td> Maths td>  
  46. <td> 89 td>  
  47. <tr>  
  48. <tr>  
  49. <td> Sam td>  
  50. <td> Mendes td>  
  51. <td> Maths td>  
  52. <td> 82 td>  
  53. </tr>  
  54. </table>  
  55. </body>   
  56. /html>  

উদাহরণ

এখানে, আমরা বর্ডার-স্পেসিং সম্পত্তির দুটি মান ব্যবহার করছি। বর্ডার-কলেপস প্রপার্টি আলাদা করে সেট করা হয়েছে, এবং বর্ডার-স্পেসিংয়ের মান 20pt 1em-এ সেট করা হয়েছে। প্রথম মান, অর্থাৎ, 20pt অনুভূমিক ব্যবধান সেট করে, এবং মান 1em উল্লম্ব ব্যবধান সেট করে।

  1. >  
  2. <html>    
  3. <head>  
  4. <title> border-spacing property </title>  
  5. <style>  
  6. table{  
  7. border: 2px solid blue;  
  8. text-align: center;  
  9. font-size: 20px;  
  10. background-color: lightgreen;  
  11. }  
  12. th{  
  13. border: 5px solid red;  
  14. background-color: yellow;  
  15. }  
  16. td{  
  17. border: 5px solid violet;  
  18. background-color: cyan;  
  19. }  
  20. #space{  
  21. border-collapse: separate;  
  22. border-spacing: 20pt 1em;  
  23. }  
  24. </style>  
  25. </head>  
  26. <body>  
  27. <h1> The border-spacing Property </h1>  
  28. <h2> border-spacing: 20pt 1em; </h2>  
  29. <table id = “space”>  
  30. <tr>  
  31. <th> First_Name </th>  
  32. <th> Last_Name </th>  
  33. <th> Subject </th>  
  34. <th> Marks </th>  
  35. </tr>  
  36. <tr>  
  37. <td> James </td>  
  38. <td> Gosling </td>  
  39. <td> Maths </td>  
  40. <td> 92 </td>  
  41. </tr>  
  42. <tr>  
  43. <td> Alan </td>  
  44. <td> Rickman </td>  
  45. <td> Maths </td>  
  46. <td> 89 </td>  
  47. </tr>  
  48. <tr>  
  49. <td> Sam </td>  
  50. <td> Mendes </td>  
  51. <td> Maths </td>  
  52. <td> 82 </td>  
  53. </tr>  
  54. </table>  
  55. </body>  
  56. </html>  


Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top