Why are picture sizes not the same as img sizes?

Question

css

I'm using picture to insert a responsive image.
But often the height or width of the picture does not match the dimensions of the img.
The img has the sizes set, the picture has nothing in the styles.
For example, in such situations, problems arise with the centering of the image in the block.

<picture>
            <source media="(min-width: 1440px)" srcset="img/logo-desktop.svg" width="202" height="59">
            <source media="(min-width: 768px)" srcset="img/logo-tablet.svg" width="174" height="52">
            <img class="logo__img" src="img/logo-mobile.svg" width="34" height="auto" alt="">
</picture>

I inserted this code, I look in the browser at a width of 320, img height 19.19px, and picture height 27.19px.
Where did the 8px difference come from?

Answer 1

Set the image property:

img.logo__img {
display: block;
}