[Résolu] grid problème espacement paragraphe et titre par Thomasdef - page 1

Bonjour,

est-ce que quelqu'un serait m'expliquer: Pourquoi quand je fais un grid avec des balise titre et texte (h1 et p), les bloc ne sont pas collés ? il y a un espace autour de sbloc que je n'arrive pas à réduire.

Alors que quand je mets dans la même colonne et sur trois lignes, un balise <p>, puis deux fois la balise <a>, il y a un espace autour du bloc <p> mais pas autour des bloc <a>

Comment supprimer cet espace entre les blocs pour pouvoir gérer la distance avec les blocs moi même (avec un grid-gap par exemple)?

Voici un petit exemple pour illustrer mon problème:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>acceuil</title>
        <link href="test.css" rel="stylesheet">
</head>

<body>

<div class="test">
  <h1>test</h1>
  <p> test 1</p>
  <a class="a1" href="test.php">test2</a>
  <a class="a2"href="test.php">test3</a>
</div>

    

</body>
</html>

et le css associé

.test {
    display:grid;
    grid-template-columns: 1fr ;
    grid-template-rows: 1fr 1fr 1fr 1fr;

}

.test h1{
    grid-column: 1/2;
    grid-row:1/2;
    background-color: aqua;
}

.test p{
    grid-column: 1/2;
    grid-row:2/3;
    background-color: aqua;
}
.a2{
    grid-column: 1/2;
    grid-row:3/4;
    background-color: aqua;
}

.a1{
    grid-column: 1/2;
    grid-row:4/5;
    background-color: aqua;
}

Merci pour votre aide

grid problème espacement paragraphe et titre

grid problème espacement paragraphe et titre

Supprimer

Modérer

Signaler le message aux modérateurs