Pourquoi y a-t-il un espace blanc au sommet de ma valeur liquidative?

Avez-vous essayé cela? XXX PRE>

Veuillez vérifier cela ... p>

p>

<nav>
        <div id="logo">
            <img src="images/img-tea-cozy-logo.png" />
        </div>
        <ul>
            <li>Mission</li>
            <li>Featured Tea</li>
            <li>Locations</li>
        </ul>
    </nav>

    <div id="mission-statement-body">
        <div id="mission-statement">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
    </div>

La propriété supérieure est définie sur une valeur spécifique lors de l'utilisation de la position: fixe, vous permettant ainsi d'éviter cela en réglant le haut sur 0.

tl: dr - il suffit de définir le haut de l'élément positionné fixe sur 0 et il sera bien réalisé, "fixé au haut de l'écran du navigateur".

Au début, essayez d'exécuter votre code comme exemple, il est donc plus facile de répondre à votre question. Vous pouvez simuler le résultat avec Codepen (mon préféré personnel) ou l'extrait de code inline de Stackoverflow (je vois que vous êtes Familiarisée avec certains outils tels que le code en surbrillance, la prochaine étape simulerait le code comme Abed Puttra a fait).

J'ai testé votre code sur Codepen et je n'ai pas pu comprendre pourquoi il avait cette compensation, assez étrange lorsque j'ai supprimé le # Mission-Body La valeur de navigation est revenue en haut (navigateurs à droite) .

Fondamentalement, le "float autour de mes positions de navigateur" comme absolu et fixe hérite du positionnement de la référence parent , mais dans votre cas Il n'y a pas de tel (il hérite donc de Dieu-sait - quoi).

Donc, chaque fois que vous utilisez ces propriétés de positionnement, essayez de définir les positions spécifiques (telles que haut , gauche , bas ou droite < / code>). Ne comptez pas sur le positionnement du navigateur par défaut car ils vous décevront toujours, cela pourrait sembler ok sur chrome mais étrange sur Firefox.

Cliquez sur pour voir le code sur Codepen

Quelques autres observations sur votre code:

• Essayez de ne pas utiliser ID S pour définir des règles CSS, pour plusieurs raisons, mais elles sont essentiellement censées être des sélecteurs très spécifiques (traitement JS par exemple) et tout composant CSS doit être reproductible et extensible ( Vous pouvez avoir 2 NAV S, une méthode fixe et une statique et avec ID s, vous devez dupliquer le code ou faire des solutions de contournement non considérées comme des meilleures pratiques).
• Essayez de ne pas utiliser Helvetica, non seulement la plupart des ordinateurs ne l'ont pas installé, mais ils sont très différents de votre secondaire (Arial) et de la longueur des mots pourraient être un problème que vous ne verriez pas quand vous ne voyez pas, Comme Nav Itens briser des lignes ou des boutons qui se rendent à Big Helvetica mais pas dans Arial. (En outre, Helvetica est une police payante si vous essayez de vraiment l'utiliser, vous devez l'acheter)
• Je pense qu'il serait préférable d'utiliser margin ou de remplissage sur relatif éléments positionnés, plutôt que haut SPACING utilisé dans # mission-énoncé-corps . De plus, avec ceux-ci, vous ne seriez pas à définir la position

  J'espère que cela a aidé