¿Cómo agregar espacio entre elementos?

En este artículo, sabremos cómo agregar espacio entre elementos en la tabla HTML, además de comprender su implementación a través de los ejemplos. Podemos usar CSS normal para hacer cambios en la tabla, donde usaremos la propiedad de borde para dar espacio entre diferentes elementos del cuerpo .

No se requieren conocimientos previos y profundos, solo son trucos básicos de CSS y HTML.

Nota: Lo único que se debe tener en cuenta es que debe haber una etiqueta «tr» dentro de la etiqueta tbody.

Ejemplo 1: el código que usa la propiedad border-top para proporcionar el espacio entre los elementos se muestra a continuación.

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>

Producción:

Adición del espacio entre los elementos de la tabla

Ejemplo 2: en el siguiente ejemplo, hemos utilizado la propiedad ::before selector , que ayudará a dar un margen entre los elementos tbody, por lo que el código para esto se proporciona a continuación. Además, hemos utilizado overflow: propiedad oculta en la tabla para evitar el desbordamiento del elemento anterior.

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>

Producción:

Evitar el desbordamiento del elemento anterior usando la propiedad de desbordamiento

Publicación traducida automáticamente

Artículo escrito por TARuN y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *