[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

Salut,

Ca serait pas le line-height qui te jouerait des tours ?

bonjour, merci pour vos réponses,
ta solution centre bien le nom du site dans le bloc, par contre on peut constater que cela augmente la taille du bloc conteneur au dela des 60px spécifiés a la base vu que le logo fait 60px et qu'il reste des marges on est sur la bonne voie mais il reste quelque chose a faire je pense ... ahh c'était bien quand j'avais arreté css, j'avais oublié toutes ces galeres ... en plus maintenant que je m'y remet je découvre le système de grid qui semble tout chambouler à nouveau

Bonjour, et merci pour ta réponse c'est éxactement l'éffet recherché J'avais pensé a utiliser une flexbox mais je trouvais ca dommage de devoir passer par la pour un truc aussi simple qu'une image avec un texte centré dans une box, je pensais qu'une solution plus simple était disponible a base de vertical align ^^
En tout cas je vais utiliser ca tant que je ne trouve pas d'autre solution, alors problème résolu

Merci encore, a très vite pour de nouvelles galères css
Modifié par chessdev (15 Feb 2020 - 16:47)

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;}

Bonjour

oui Alain j'avais essayé de changer le line-height, rien n'y fait, malgré l'application d'un reset css total la méthode simple va toujours rajouter de la hauteur, du moins sur mon navigateur (chrome). Il y a surement des tricks pour tricher et faire que ça s'affiche comme il faut, mais la solution de Jean-Pierre-Bruneau a base de flexbox est la meilleure que j'ai trouvé, elle règle non seulement le problème d'alignement comme je le voulais, mais du coup j'utilise la flexbox aussi pour aligner mon menu principal, ça fait d'une pierre deux coups, c'est standard et je me casse pas la tête pour régler un truc simple de cette manière