How to add space between elements ?

13 Dec, 2021
In this article, we will know how to add space between elements in the HTML table, along with understanding its implementation through the examples. We can use normal CSS to make changes in the table, where we will be using border property to give spacing between different tbody elements.
No prior and deep knowledge is required it is just basic CSS and HTML tricks.
Note: Only thing to be noted is that there must be one “tr” tag inside the tbody tag.
Example 1: The code that uses the border-top property to give the spacing between the elements is given below.
HTML
<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width,                   initial-scale=1.0">    <title>Document</title>    <style>    body {        color: #fff;        font-size: 12px;    }         table {        border-collapse: collapse;    }         table td {        padding: 5px;        background-color: #093d24;    }         .tbody {        border-top: 25px solid #0f9d58;    }    </style></head> <body>    <table>        <tbody class="tbody">            <tr>                <td>GeeksforGeeks</td>                <td>GeeksforGeeks</td>            </tr>            <tr>                <td>GeeksforGeeks</td>                <td>GeeksforGeeks</td>            </tr>        </tbody>        <tbody class="tbody">            <tr>                <td>GeeksforGeeks</td>                <td>GeeksforGeeks</td>            </tr>            <tr>                <td>GeeksforGeeks</td>                <td>GeeksforGeeks</td>            </tr>        </tbody>        <tbody class="tbody">            <tr>                <td>GeeksforGeeks</td>                <td>GeeksforGeeks</td>            </tr>            <tr>                <td>GeeksforGeeks</td>                <td>GeeksforGeeks</td>            </tr>        </tbody>    </table></body> </html>
Output:
Adding the space between the elements in the table
Example 2: In the below given example, we have used the ::before selector property, which will help in giving a margin between the tbody elements, so the code for this is given below. Also, we have used overflow: hidden property in the table to prevent overflow of before element.
HTML
<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <style>    body {        color: #fff;        font-size: 12px;        background-color: #f2f2f2;    }         table {        overflow: hidden;        border-collapse: collapse;        position: relative;    }         table td {        padding: 5px;        border: 1px solid #000;        background-color: #093d24;    }         .tbody::before {        content: "";        margin: 10px;    }    </style>    <title>Document</title></head> <body>    <table>        <tbody class="tbody">            <tr>                <td>GeeksforGeeks</td>                <td>GeeksforGeeks</td>            </tr>            <tr>                <td>GeeksforGeeks</td>                <td>GeeksforGeeks</td>            </tr>        </tbody>        <tbody class="tbody">            <tr>                <td>GeeksforGeeks</td>                <td>GeeksforGeeks</td>            </tr>            <tr>                <td>GeeksforGeeks</td>                <td>GeeksforGeeks</td>            </tr>        </tbody>        <tbody class="tbody">            <tr>                <td>GeeksforGeeks</td>                <td>GeeksforGeeks</td>            </tr>            <tr>                <td>GeeksforGeeks</td>                <td>GeeksforGeeks</td>            </tr>        </tbody>    </table></body> </html>
Output:
Preventing the overflow of before element using Overflow Property
bhaskargeeksforgeeks
CSS-Basics
HTML-Basics
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.