Open In App

How to add space between elements in HTML?

Last Updated : 29 Oct, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Spaces in HTML are essential for improving layout and readability. To add space between elements, such as rows in a table, you can use CSS properties like margin, padding, and border.

Simple elements like <br> (line break) or <hr> (horizontal line) can also create space between sections. These basic CSS techniques make it easy to manage spacing between elements for a cleaner and more organized layout.

Different Methods to Add Spaces Between Elements in HTML

Here are a few methods to add space between elements in HTML:

Table of Content

Method 1: Using border-top property

The border-top property in CSS can be used to add spacing between table elements by adding a top border to the <tbody> sections. This creates a visible gap between each section of the table, making the rows more distinct.

Syntax:

.tbody {
    border-top: <border-width> <border-style> <border-color>;
}

Example: In this example, we use the border-top property to create a gap between each <tbody> element by adding a top border with a width of 25px and a color of #0f9d58. This makes each section of the table visually separated.

HTML 
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      content="width=device-width, 
                   initial-scale=1.0"
      name="viewport"
    />
    <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

Method 2: Using ::before Pseudo-Element

The ::before pseudo-element can be used to add space before specific elements, such as table rows or sections. By inserting content and margins before a <tbody>, you can visually separate each section of the table.

Syntax:

.tbody::before {
    content: "";
    margin: <value>;
}

Example: In this example, we use the ::before pseudo-element to add space before each <tbody>. The margin: 10px; property ensures a gap is created between different <tbody> sections.

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

Method 3: Using the margin Property

The CSS margin property creates space outside of elements, separating them from other content. This method allows you to add vertical or horizontal space between elements for a cleaner layout.

Syntax:

.element { 
   margin: <top> <right> <bottom> <left>;
}

Example: In this example, each .gfg-box element has a margin of 15px from the top and bottom, ensuring space between them.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
        body {
            background-color: #e0e0e0;
            font-family: Arial, sans-serif;
        }

        .gfg-box {
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            margin: 15px 0; /* Adds space between each box */
            text-align: center;
            border-radius: 10px;
        }
    </style>
    <title>GFG Margin Example</title>
</head>

<body>
    <div class="gfg-box">GFG Block 1</div>
    <div class="gfg-box">GFG Block 2</div>
    <div class="gfg-box">GFG Block 3</div>
</body>

</html>


Output :

Using the margin Property

Using padding property

Method 4: Using padding property

The padding property creates space inside an element, between the content and the element’s border. It helps improve readability by ensuring the content doesn’t touch the edges.

Syntax:

.element {  
  padding: <top> <right> <bottom> <left>;
}

Example: In this example, we add padding to the .gfg-container div to create space inside the element, making the content look more balanced.

HTML 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      body {
        background-color: #f5f5f5;
        font-family: Arial, sans-serif;
      }

      .gfg-container {
        background-color: #2196f3;
        color: white;
        padding: 30px;
        /* Adds space inside the container */
        margin: 20px;
        /* Adds space outside the container */
        text-align: center;
        border-radius: 10px;
      }
    </style>
    <title>GFG Padding Example</title>
  </head>

  <body>
    <div class="gfg-container">
      <p>GFG Container with Inner Padding</p>
    </div>
  </body>
</html>

Output:

Using padding property

Using padding property




Next Article
How to create a clickable button in HTML ?

T
tarun007
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox