Maison > interface Web > tutoriel CSS > Comment changer l'espacement de li dans ul avec CSS

Comment changer l'espacement de li dans ul avec CSS

WBOY
Libérer: 2021-12-13 09:45:12
original
6683 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

. Si vous êtes intéressé, vous pouvez continuer à cliquer sur tutoriel vidéo CSS pour apprendre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal