padding-bottom : 0px; ne fonctionne pas !

coller des nav en bordure basse

Sujet résolu

20 mai 2022 à 12:45:13

Bonjour à tous !

je vous expose mon problème je souhaiterais 'coller' mes liens <nav> en limite basse de leur bordure, mais le padding-bottom ne fonctionne pas ni le 'align-item:flex-end' en essayant d'insérer ces derniers dans les différents selecteur de mon css

mon code CSS:

/*nav */

#nav_interne 
{
     display: flex;
     justify-content: space-between; 
     
     background-color:#C0C0C0;
     border-radius: 5px;
     border: 1px solid black;
     padding-bottom: 0px;
     
}

#nav_interne a
{
     text-decoration: none;
     color: #006400;
     align-items: flex-end;
}
#nav_interne a:hover 
{
     text-decoration: underline;
     color: #FFC300;
}



/* mon article */

#mon_article
{
     border: 1px solid black;
     border-radius: 5px;
     margin-top:30px ;
}

Mon HTML :

<!DOCTYPE html>
<html lang="fr">
	<head>
			
			<meta charset="utf-8" />
			<link rel="stylesheet" type="text/css" href="mastructure.css">
			<title>Mes plus belles randonnées</title>
	</head>


		<body>
			<div id="bloc_page">

				 
					<nav id="nav_interne"><!-- liens dans le site  -->
									<a href="top3.html"><h1>Top 3</h1></a> 
	                            	<a href="#menuconseils" title="et astuces !"><h1>Conseils</h1></a> 
	                            	<a href="apropos.html"><h1>A propos</h1></a>  
	                                <a href="#menucontact"><h1>Contact</h1></a> 
	                </nav>
				

					<header id="en_tete"> <!-- titre du site et logo  -->
						<h1>Mes plus belles randonnées</h1>
					</header>

Merci à ceux qui prendront le temps de m'aider à comprendre mon erreur

-
Edité par AlexandreLeoty 20 mai 2022 à 12:59:33

ChrisLebure

20 mai 2022 à 13:24:09

bonjour,

très mauvaise idée d'utiliser <h1> pour une navigation, erreur sémantique. Et du coup, comme H1 et les autres balises de titrage ont pas défaut une marge sup et inf de l'ordre d'1 em ou moins, on a ce problème de marge qui empêche de coller la bordure.

Supprime les H1 qui n'ont rien à faire ici

AlexandreLeoty

20 mai 2022 à 13:43:46

C'est vrai merci !Erreur de sémantique, maintenant ça fonctionne.

Merci ;-)