Comment changer l'espacement de li dans ul avec CSS-tutoriel CSS-php.cn

Comment changer l'espacement de li dans ul avec CSS

WBOY

Libérer： 2021-12-13 09:45:12

original

6593 Les gens l'ont consulté

En CSS, vous pouvez utiliser l'attribut "margin-bottom" pour modifier l'espacement de li dans ul. Cet attribut est utilisé pour définir la marge inférieure de l'élément. Utilisez cet attribut pour définir la marge inférieure de l'élément li dans. ul, puis modifiez le li L'espacement, la syntaxe est "ul li{margin-bottom: spacing value;}".

Comment changer l'espacement de li dans ul avec CSS

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment changer l'espacement de li en ul en css

En css, si on veut changer l'espacement de li en ul, on peut utiliser l'attribut margin-bottom La fonction du margin-bottom. L'attribut consiste à définir la marge inférieure de l'élément.

La valeur de cet attribut est la suivante :

Comment changer lespacement de li dans ul avec CSS

Prenons un exemple pour voir comment définir l'espacement de li dans ul L'exemple est le suivant :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    ul li{
        margin-bottom:20px;
    }
    </style>
</head>
<body>
<p>无序列表：</p>
<ul>
  <li>雪碧</li>
  <li>可乐</li>
  <li>凉茶</li>
</ul>
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment changer lespacement de li dans ul avec CSS