Essayer de faire toucher un en-tête en haut de ma page, mais il semble y avoir une marge automatique, même si spécifié autrement.
J'ai essayé de spécifier margin-top: 0 , et ont également défini margin: 0 sur le corps.
<h1>test</h1>
h1 {
margin-top: 0px;
}
body {
margin: 0px;
}
Au lieu de toucher le haut de la page, l'en-tête "test" a une marge automatique en haut.
4 Réponses :
ajout de hauteur de ligne: 75%; semble faire l'affaire:
h1 {
margin-top: 0px;
line-height: 75%;
}
body {
margin: 0px;
}
Attention: la valeur exacte dépend de la police.
Ajoutez simplement la hauteur de ligne pour votre balise h1. Définissez également la hauteur de ligne pour le corps.
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>test</h1>
</body>
</html>
h1 {
margin-top: 0px;
line-height: 18px;
}
body {
margin: 0px;
line-height: 1.15;
}
Remarque: pour CSS, 0 ne nécessite pas d'unité, c'est-à-dire margin-top: 0 .
Travaillez bien. Le problème est que tous les autres éléments de la page sont forcés à la même hauteur de ligne
Vous avez essayé de réduire la hauteur de ligne du corps et de définir la hauteur de ligne individuellement pour les balises internes.
L'en-tête qui ne touche pas le haut, même après avoir défini les marges à zéro, doit être dû à la hauteur de la ligne.Essayez de définir une bordure colorée, c'est-à-dire une bordure: 1px vert uni. Si vous voyez que la bordure touche le haut, la vraie raison est l'espace autour du texte / police en raison de la hauteur de la ligne.
La hauteur de ligne est définie par les règles css standard incluses dans la page html pour créer un espacement correct entre le texte OU par défaut, elle est définie sur normal qui utilise une valeur standard. Donc, si vous réduisez l'espace autour du texte en utilisant la propriété line-height, cela fera l'affaire, mais je ne recommande pas de le réduire à moins de 1: line-height: 1
Utilisez des lettres majuscules et vous verrez que votre élément touche déjà le haut de l'écran, il est donc logique que les minuscules soient légèrement plus bas.
<h1>ÂtestË</h1>
h1 {
margin-top: 0px;
}
body {
margin: 0px;
}
Vous pouvez inspecter l'élément à l'aide de la Developer Console. Par défaut,
h1a une marge supérieure en raison de la feuille de style de l'agent utilisateur , les styles donnés par le navigateur. Dans Chrome, il a 0,67em . Dans Chrome, votre CSSmargin-topa annulé ce style par défaut. Mais cela ne s'applique pas à tous les navigateurs. Sur quel navigateur travaillez-vous?@Raptor utilisant Chrome
Vous pouvez tester la hauteur de ligne de h1 en la définissant sur 1. hauteur de ligne: 1;
@Raptor Qu'entendez-vous par «cela ne s'applique pas à tous les navigateurs»? Pourquoi pas? Dans quels navigateurs
h1 {margin-top: 0px;}ne fonctionne-t-il pas? Pouvez-vous désigner une source officielle?h1 {marge: 0px; position: absolue; haut: -10px; gauche: -1px;}
@MrLister Non. Je ne parle pas de CSS qui ne fonctionnera pas sur un navigateur spécifique. Ce que j'essaie de dire, c'est que chaque navigateur a sa propre feuille de style d'agent utilisateur. C'est pourquoi nous devons utiliser CSS Reset pour normaliser l'aspect et la convivialité de tous les navigateurs. Par exemple, chaque navigateur a sa propre famille de polices par défaut. C'est pourquoi un élément sans style peut apparaître différent dans différents navigateurs, en particulier dans IE.
Un autre facteur qui affecte l'apparence et la convivialité est la valeur de zoom du navigateur, qui correspond aux paramètres côté client. Pour réinitialiser le zoom à 100%, appuyez sur Ctrl-0 (PC) ou Cmd-0 (Mac). Parfois, lorsque vous zoomez trop, votre
h1peut apparaître en laissant un peu la marge supérieure.