Comment faire pour que le <bouton>parent prenne la taille du <svg>enfant

Question

J'utilise une image svg avec l'aide de use à partir du sprite précédemment créé. Le problème est que lorsque j'ai <svg> à l'intérieur de button alors div prend tout l'espace disponible lorsque le revenu attendu doit être de la même taille que l'enfant. Avez-vous de l'aide ?

Mon code :

<button class="presentation__video-controls-play-pause" id="play-pause">
    <svg class="play-pause-icon" width="22" height="29" viewBox="0 0 22 29">
        <use href="img/icons/sprite.svg#play"></use>
    </svg>
</button>

Answer 1

Vous devez faire en sorte que le padding et la margin du parent soient à 0

<button class="presentation__video-controls-play-pause" id="play-pause" style="padding:0px;margin:0px;">
    <svg class="play-pause-icon" width="22" height="29" viewBox="0 0 22 29">
        <use href="img/icons/sprite.svg#play"></use>
    </svg>
</button>