- Introduction to CSS border-spacing property in Hindi
Introduction to CSS border-spacing property
इस CSS property का उपयोग तालिका में आसन्न कोशिकाओं की सीमाओं के बीच की दूरी निर्धारित करने के लिए किया जाता है। यह केवल तब लागू होता है जब border-collapse property को separate पर सेट किया जाता है।यदि border-collapse, collapse पर निर्धारित किया गया है तो सीमाओं के बीच कोई स्थान नहीं होगा।
इसे vertical और horizontal spacing के निर्धारण के लिए एक या दो मूल्यों के रूप में परिभाषित किया जा सकता है।
- जब केवल एक मान निर्दिष्ट किया जाता है, तो यह horizontal और vertical spacing दोनों सेट करता है।
- जब हम दो-मूल्य के syntax का उपयोग करते हैं, तो पहले एक का उपयोग horizontal spacing (यानी adjacent columns के बीच की जगह) को सेट करने के लिए किया जाता है, और दूसरा मान vertical spacing (यानी adjacent rows के बीच का स्थान) सेट करता है।
Syntax
border-spacing: length | initial | inherit;Property Values
इस CSS property के मूल्यों को निम्नानुसार परिभाषित किया गया है।
length: यह मान px, cm, pt, आदि में adjacent table cells की सीमाओं के बीच की दूरी निर्धारित करता है। Negative values की अनुमति नहीं है।
initial: यह property को उसके डिफ़ॉल्ट मूल्य पर सेट करता है।
inherit: यह अपने मूल तत्व से property को inherit करता है।
आइए कुछ उदाहरणों का उपयोग करके इस CSS property को समझते हैं। पहले उदाहरण में, हम border-spacing property के एकल मूल्य का उपयोग कर रहे हैं, और दूसरे उदाहरण में, हम border-spacing property के दो मूल्यों का उपयोग कर रहे हैं।
उदाहरण
यहां, हम border-spacing property के एकल मूल्य का उपयोग कर रहे हैं। border-collapse property, separate पर सेट है, और border-spacing का मूल्य 45px पर सेट है।
<!DOCTYPE html>
<html>
<head>
<title> border-spacing property </title>
<style>
table{
border: 2px solid blue;
text-align: center;
font-size: 20px;
background-color: lightgreen;
}
th{
border: 5px solid red;
background-color: yellow;
}
td{
border: 5px solid violet;
background-color: cyan;
}
#space{
border-collapse: separate;
border-spacing: 45px;
}
</style>
</head>
<body>
<h1> The border-spacing Property </h1>
<h2> border-spacing: 45px; </h2>
<table id = "space">
<tr>
<th> First_Name </th>
<th> Last_Name </th>
<th> Subject </th>
<th> Marks </th>
</tr>
<tr>
<td> James </td>
<td> Gosling </td>
<td> Maths </td>
<td> 92 </td>
</tr>
<tr>
<td> Alan </td>
<td> Rickman </td>
<td> Maths </td>
<td> 89 </td>
</tr>
<tr>
<td> Sam </td>
<td> Mendes </td>
<td> Maths </td>
<td> 82 </td>
</tr>
</table>
</body>
</html> उत्पादन
उदाहरण
यहां, हम border-spacing property के दो मूल्यों का उपयोग कर रहे हैं। border-collapse property के लिए सेट है separate, और border-spacing का मूल्य 20pt 1em पर सेट है। पहला मान, यानी, 20pt horizontal spacing सेट करता है, और मान 1em vertical spacing सेट करता है।
<!DOCTYPE html>
<html>
<head>
<title> border-spacing property </title>
<style>
table{
border: 2px solid blue;
text-align: center;
font-size: 20px;
background-color: lightgreen;
}
th{
border: 5px solid red;
background-color: yellow;
}
td{
border: 5px solid violet;
background-color: cyan;
}
#space{
border-collapse: separate;
border-spacing: 20pt 1em;
}
</style>
</head>
<body>
<h1> The border-spacing Property </h1>
<h2> border-spacing: 20pt 1em; </h2>
<table id = "space">
<tr>
<th> First_Name </th>
<th> Last_Name </th>
<th> Subject </th>
<th> Marks </th>
</tr>
<tr>
<td> James </td>
<td> Gosling </td>
<td> Maths </td>
<td> 92 </td>
</tr>
<tr>
<td> Alan </td>
<td> Rickman </td>
<td> Maths </td>
<td> 89 </td>
</tr>
<tr>
<td> Sam </td>
<td> Mendes </td>
<td> Maths </td>
<td> 82 </td>
</tr>
</table>
</body>
</html> उत्पादन
