[Résolu] Problèmes de marge et d'alignement

Bonjour à tou(te)s,

je commence un nouveau site internet et je recontre un problème d'alignement / marges dès le début sur un code tout simple :

<div class="logo">
	<img src="img/logo.svg">
	<h1 class="site-name">
		<a href="/">nom du site</a>
	</h1>
</div>

et le css

* {
margin: 0;
padding: 0;
}

a {
	text-decoration : none;
}

.logo { 
	background:#ccc;
	height: 60px;
	text-align:center;
}

.logo img {
	height: 60px;
}

.site-name {
	display:inline-block;
	height: 60px;
	font-size: 60px;
	background:#bbb;
}

donc voila je m'attends avec ce code a ce que tout soit bien aligné dans un bloc de 60px de hauteur, mais le résultat est loin de mes attentes :



comme vous le voyez, le h1 fait n'importe quoi, il sort du bloc conteneur, et contient des marges en haut et en bas sans que je puisse y faire quoi que ce soit. Comment régler ce problème de marges ?
Question alignement, j'aimerai que le nom du site soit centré verticalement par rapport au logo, alors j'ai essayé un vertical-align : middle sur le titre, mais cela ne centre pas le bloc par rapport a l'image ... désolé pour ces questions de débutant, mais j'en pouvais plus apres avoir passé des heures a retourner internet et ses conseils douteux ^^ merci d'acance pour votre aide et bonne soirée

C'est parce que la hauteur de ligne n'est pas égale à la taille des caractères.
Tu fixe la taille des caractères à 60px, cela correspond à une hauteur de ligne plus importante.
Une solution est de fixer pour h1 {line-height:60px;}