Footer qui fait ce qu'il veut ......

Que veux tu faire exactement?

Si tu veux centrer verticalement 'mentions légales' et 'contact', il faut que le line-height soit ègale à height, donc:

li { 
width : 900px ;
height : 40px ;
border: 5px ridge;
line-height:40px;
}

Tu peux pas avoir 'footer li' et plus bas 'li'. Tu définis la même balise et du coup en CSS, c'est la dernière déclaration qui est prise en compte. Pour 'border' il faut préciser la taille, la couleur et le type de bordure, donc 3 choses. Au lieu d'utiliser height, essaie de jouer avec le padding, qui permet de centrer aussi des eléménts. Essaie de na pas utiliser les id en css pour la mise en forme et utiliser des classes au maximum. Les ids ajoutent trop de spécificités et sont plus réservés au javascript, les liens ancrés et les attributs aria pour l'accéssibilité.

je me suis mal fait comprendre
je veux que mon footer soit moins épais en hauteur
dans le "footer li" quand je descends le height en-dessous de 20px , je n'ai aucun effet(si je monte à 50 ou 100px, ça grandit normalement)




oups .........
je viens de trouver la première solution en écrivant .
la nuit porte blablablablabla ..........
le height était forcément à mettre dans le footer , et non dans le footer li

me reste à trouver comment virer les marges de manière à ce que mon footer li prenne l'intégralité de l'espace du footer

pour "footer li" et "li" , il n'y a pas d'incohérence .
C'est juste qu'ils étaient sur 2 feuilles séparées , ce que je ne sais pas faire sur codepen
J'ai remis les lignes dans le bon ordre pour être plus propre sur la syntaxe
Le premier "li" correspond aux boites en général (au début, elles étaient toutes identiques ....)
j'ai changé les données pour les "li" que je souhaitais différents

donc :

après 2 heures de plus de prise de tête , je donne ma langue au chat
pourquoi quand je demande une marge à 0 dans mon footer, ben.......y veut pas

salut,

#footer ul{
  padding:0 !important;
  margin:0 !important;
  display:block;
}
			
footer li {		
  display:inline;
  border:0;
  margin:0;
  padding:0;
  line-height:normal;
  width:auto;
  height:auto;
}