Kad se odredi visina <img> elementa, roditelj (parent) ima 4px veću visinu od visine slike, što stvara mali razmak između slike i ostalih elemenata koji nema veze ni s marginama ni s paddingom.
To nije bug već zadano ponašanje. Naime <img> je po default-u inline element, a inline elementi se po default-u poravnavaju u odnosu na baseline kontejnera. Baseline je linija gdje “sjede” slova poput a, b, c, d, za razliku od slova g, j, y čiji dijelovi idu ispod te bazne linije (ti dijelovi se zovu descenders).
By Max Naylor – Own work, Public Domain, Link
S obzirom da se slika po default-u prikazuje na toj osnovnoj liniji (baseline), tih 4px “viška” je ostavljeno za descendere.
Kako to ispraviti?
- promijeniti vertical-align property (koji se primjenjuje samo za inline elemente)
img {vertical-align: bottom} - promijeniti display property slike u blok element, umjesto u inline
img {display:block} - definirati visinu retka ili veličinu fonta roditelja na 0
Izvor
https://gaurav5430.medium.com/extra-4px-at-the-bottom-of-html-img-8807a7ab0ca2