¿Cómo establecer el espacio vertical entre la lista de elementos usando CSS?

Posted on by Rudeus Greyrat

La lista de elementos en HTML puede ser de varios tipos, como una lista ordenada , una lista desordenada o podría ser una lista de descripción . De forma predeterminada, hay un espacio vertical fijo entre la lista de elementos. Podemos aumentar o disminuir el espaciado vertical de la lista de elementos usando diferentes propiedades CSS. En este artículo, cubriremos todas las formas posibles de establecer el espacio vertical entre la lista de elementos.

Propiedad de altura de línea de CSS: en este método, estableceremos la altura de línea de los elementos de la lista que, en última instancia, aumentará o disminuirá el espaciado vertical de los elementos de la lista.

  • Sintaxis: 
    line-height: normal|number|length|percentage|initial|inherit;
  • Ejemplo:

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" 
              content="width=device-width, 
                       initial-scale=1.0">
        <title>
            Using line-height to
            set line-height
        </title>
      
        <style>
            .container {
                width: 500px
            }
            h1 {
                color: green;
            }
            b {
                position: absolute;
                top: 20%;
            }
            .left ul {
      
                /* Increase line-height 
                   compare to default */
                line-height: 2.5em;
                float: left;
            }
            .right {
                float: right;
            }
        </style>
      
    </head>
      
    <body>
        <div class="container">
            <h1>GeeksforGeeks</h1>
            <h4>
                Using line-height property
                to set line height
            </h4>
            <br><br>
            <div class="left">
                <b>line-height property effect</b><br>
                <ul>
                    <li>For Geeks</li>
                    <li>GeeksforGeeks</li>
                    <li>A Computer Science Poratal</li>
                </ul>
            </div>
            <div class="right">
                <b>No line-height property effect</b><br>
                <ul>
                    <li>For Geeks</li>
                    <li>GeeksforGeeks</li>
                    <li>A Computer Science Poratal</li>
                </ul>
            </div>
        </div>
    </body>
      
    </html>
  • Producción:

Propiedad margin-top de CSS : aplicaremos la propiedad margin-top que establecerá la altura de línea de los elementos de la lista, lo que en última instancia aumentará o disminuirá el espaciado vertical de los elementos de la lista. La propiedad margin-bottom de CSS también puede aplicarse.
Nota: También puede usar solo la propiedad de margen CSS .

  • Sintaxis: 
    For margin-top
margin-top: length|auto|initial|inherit|percentage;
    For margin-bottom
margin-bottom: length|auto|initial|inherit|percentage;
  • Ejemplo:

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" 
              content="width=device-width, 
                       initial-scale=1.0">
        <title>
            Using margin-top and margin-bottom
            to set line height
        </title>
      
        <style>
            .container {
                width: 500px
            }
            h1 {
                color: green;
            }
            b {
                position: absolute;
                top: 20%;
            }
            .left  {
      
                float: left;
            }
            .right {
      
                float: right;
            }
      
            li:not(:first-of-type) {
                margin-top: 1.5em;
            }
      
            li:not(:last-of-type) {
                margin-bottom: 1.5em;
            }
        </style>
      
    </head>
      
    <body>
        <div class="container">
            <h1>GeeksforGeeks</h1>
            <h4>
                Using margin-top and margin-bottom
                to set line height
            </h4>
            <br><br>
            <div class="left">
                <b>margin-top property effect</b><br>
                <ul>
                    <li>For Geeks</li>
                    <li>GeeksforGeeks</li>
                    <li>A Computer Science Poratal</li>
                </ul>
            </div>
            <div class="right">
                <b>margin-bottom property effect</b><br>
                <ul>
                    <li>For Geeks</li>
                    <li>GeeksforGeeks</li>
                    <li>A Computer Science Poratal</li>
                </ul>
            </div>
        </div>
    </body>
      
    </html>
  • Producción:

Propiedad CSS padding-top : aplicaremos la propiedad padding-top que establecerá la altura de línea de los elementos de la lista que, en última instancia, aumentará o disminuirá el espaciado vertical de los elementos de la lista. La propiedad padding-bottom de CSS también es aplicable.
Nota: También puede usar solo la propiedad de relleno CSS .

  • Sintaxis: 
    For padding-top
padding-top: length|initial|inherit;
    For padding-bottom
padding-bottom: length|initial|inherit;
  • Ejemplo:

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" 
              content="width=device-width, 
                       initial-scale=1.0">
        <title>
            Using padding-top and padding-bottom
            to set line height
        </title>
      
        <style>
            .container {
                width: 500px
            }
            h1 {
                color: green;
            }
            b {
                position: absolute;
                top: 20%;
            }
            .left  {
      
                float: left;
            }
            .right {
      
                float: right;
            }
      
            li:not(:first-of-type) {
                padding-top: 1.0em;
            }
      
            li:not(:last-of-type) {
                padding-bottom: 1.0em;
            }
        </style>
      
    </head>
      
    <body>
        <div class="container">
            <h1>GeeksforGeeks</h1>
            <h4>
                Using padding-top and padding-bottom
                to set line height
            </h4>
            <br><br>
            <div class="left">
                <b>padding-top property effect</b><br>
                <ul>
                    <li>For Geeks</li>
                    <li>GeeksforGeeks</li>
                    <li>A Computer Science Poratal</li>
                </ul>
            </div>
            <div class="right">
                <b>padding-bottom property effect</b><br>
                <ul>
                    <li>For Geeks</li>
                    <li>GeeksforGeeks</li>
                    <li>A Computer Science Poratal</li>
                </ul>
            </div>
        </div>
    </body>
      
    </html>
  • Producción:

      • Nota: Los espacios verticales serán diferentes en todos los métodos.

Publicación traducida automáticamente

Artículo escrito por sanjeev2552 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 *