Почему родительские html-элементы добавляют дополнительное пространство по высоте??? И как это отключить?

button {
    display: block;
    position: relative;
    padding: 0;
}

p {
    margin: 0;
    font-size: 16px;
}

svg {
    width: 40px;
    height: 40px;
    fill: #000;
}

div {
    width: fit-content;
}

<button><p>some text</p></button>
<button>
    <svg viewBox="0 0 512 512"  xml:space="preserve">
        <g>
            <rect y="16" width="512" height="96"/>
            <rect y="208" width="512" height="96"/>
            <rect y="400" width="512" height="96"/>
        </g>
    </svg>
</button>
<div>
    <svg viewBox="0 0 512 512"  xml:space="preserve">
        <g>
            <rect y="16" width="512" height="96"/>
            <rect y="208" width="512" height="96"/>
            <rect y="400" width="512" height="96"/>
        </g>
    </svg>
</div>
<div>
    <img src="image.jpg" alt="image">
</div>

Получилось примерно такое

Вот что я получаю в <button><p>some text</p></button> согласно стилевому блоку если его можно так назвать:

Для <p> элемента я прописал 16px высоты, по идее родительский элемент должен был принять высоту и ширину дочернего, но вместо указанных 16px высоты я имею в родительском button-е - 18.4px.

Далее та же закономерность для вложенных svg-векторов и вложенных картинок.

Вот что показыват стилевой блок для

<button>
    <svg viewBox="0 0 512 512"  xml:space="preserve">
        <g>
            <rect y="16" width="512" height="96"/>
            <rect y="208" width="512" height="96"/>
            <rect y="400" width="512" height="96"/>
        </g>
    </svg>
</button>

:

И то же самое для svg-вектора в div-е и вложенной картинки:

Для кода

<div>
    <svg viewBox="0 0 512 512"  xml:space="preserve">
        <g>
            <rect y="16" width="512" height="96"/>
            <rect y="208" width="512" height="96"/>
            <rect y="400" width="512" height="96"/>
        </g>
    </svg>
</div>

Результат

Для кода

<div>
    <img src="image.jpg" alt="image">
</div>

Результат

Как видно svg имеет ширину 40px и высоту 40px. А родительский div уже имеет ширину 40px и высоту 44px. Откуда взялись эти дополнительные 4 пикселя? Как убрать дополнительные пиксели которые создаются вложенностью элементов???

P.S. Вот стилевой блок для SVG:

А вот для непосредственно картинки (картинка сама по себе черного цвета размерами 20х20 px)