Maison > Article > interface Web > Comment supprimer l'espace entre les boutons en CSS

Comment supprimer l'espace entre les boutons en CSS

WBOYoriginal: 2021-12-02 11:58:153215parcourir

En CSS, vous pouvez utiliser l'attribut "font-size" pour supprimer l'espacement entre les boutons. L'espacement entre les boutons est dû au fait que les nœuds d'élément ont des nœuds de texte, qui occuperont la largeur lors de l'indentation du code. le parent de l'élément bouton Ajoutez le style "font-size:0;" à l'élément pour supprimer l'espacement.

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

Comment supprimer l'espacement entre les boutons en CSS

Normalement, après avoir défini les boutons, il y aura un espacement entre les boutons. 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>
</head>
<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
</body>
</html>

Résultat de sortie :

Comment supprimer lespace entre les boutons en CSS

À ce stade, nous devons définir l'élément parent de l'élément bouton et ajouter le style "font-size:0;" à son élément parent.

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>
    body{
font-size:0;
}
</style>
</head>
<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
</body>
</html>

Résultat de sortie :

Comment supprimer lespace entre les boutons en CSS

<!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>
    div{
        font-size:0;
        width:200px;
        height:100px;
        border:1px solid red;
}
</style>
</head>
<body>
    <div>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    </div>
</body>
</html>

Résultat de sortie :

Comment supprimer lespace entre les boutons en CSS

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)

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!

html5 css css3

Déclaration：

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

Article précédent：Comment obtenir l'effet de non-décoloration d'une balise en CSSArticle suivant：Comment obtenir l'effet de non-décoloration d'une balise en CSS

Articles Liés

Voir plus