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

Par Marc TABARIES, il y a 4 ans

Les bases HTML/CSS

Bonjour,

Je me retrouve confronté à un problème de html/css simple.

Pour être franc, je n'avais jamais remarqué ce comportement / bug. En fait, je souhaite tout simplement supprimer la marge qui se trouve sous les images qui disposent d'un lien.

J'ai essayé différentes choses, mais cela ne change rien.

Voici un lien JSFiddle où vous trouverez le problème : https://jsfiddle.net/9qx5oga3

Auriez-vous une idée de comment corriger ça ?

Par avance, merci.

5 réponses

popotte, il y a 4 ans
.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%

MickaelTD, il y a 4 ans

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; } ///
Marc TABARIES, il y a 4 ans

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 !

MickaelTD, il y a 4 ans

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 }
popotte, il y a 4 ans

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)