Supprimer la marge sous les images qui disposent d'un lien

    .social {
        height: 32px;
    }

     a {
         height: 100%;
    }

    img {
        height: 100%;
   }

Ca devrait etre bon comme ça ;)
D'abord il faut définir une taille fixe au parent pour faire fonctionner la taille relative (%) des enfants, ensuite suffit de mettre les enfants en taille 100%

Hello, ta plusieurs maniere de le faire, l'exemple cité plus haut et ceux-la

a, 
img {
  margin: 0;
  padding: 0;
}

.social {
  background-color: black;
  text-align: center;
  height: 32px; // taille fixe sur ta div
}

.instagram {
  width: 32px;
  height: auto ou "100%"; // prend la hauteur de la div
}

/////

a, 
img {
  margin: 0;
  padding: 0;
}

.social {
  background-color: black;
  display: flex; // permet de rendre t'es elements flexible ( a par defaut fera 100% de hauteur de ta div )
  justify-content: center; // centre l'element a
}

a {
  display: inherit; // annule le stretch par defaut du display: flex, a fera la hauteur de ton image et ta div fera la hauteur de ton image
}

.instagram {
  width: 32px;
  height: 32px;
}

///

Merci pour ton retour.

En effet j'y avais pensé aussi à cette solution.

Le gros problème, c'est qu'il faut forcément déterminer une hauteur pour l'élément parent. J'aurais souhaité quelque chose de plus "généraliste" et de plus "automatique".

Mais je pense que c'est la meilleure solution.

Si d'autres ont des idées... je suis preneur !

Sur la seconde partie de ma réponse, tu ne détermine pas de hauteur sur l'élément parent, c'est la taille de ton image qui determine la hauteur.
La j'ai volontairement gardé les tailles que tu avais fixé à ton image, car celle-ci est beaucoup plus grande.
Si tu resize manuellement tes icones en 32x32 , tu n'aura pas de hauteur à mettre dans ton code.

Et du coup tu n'aura plus que ça dans ton css.

a, 
img {
  margin: 0;
  padding: 0;
}

.social {
  background-color: black;
  display: flex; // permet de rendre t'es elements flexible ( a par defaut fera 100% de hauteur de ta div )
  justify-content: center; // centre l'element a
}

a {
  display: inherit; // annule le stretch par defaut du display: flex, a fera la hauteur de ton image et ta div fera la hauteur de ton image
}

Ah je ne connaissais pas du tout le coup du displeyy: inherit; ca va m'être utile :D

Sinon pour un truc plus généraliste, tu peux utiliser la grid CSS, ca règle le problème en une seule ligne, ensuite le justify content pour centrer puis la taille de l'image, c'est tout ^^

    a {
      display: grid;
      justify-content: center;
    }

    .social {
      background-color: black;
    }

    .instagram {
      width: 32px;
      height: 32px;
    }

CSS a implémenté ce système qui nous libère de bootstrap autant en profiter x)