-webkit-margin ajoute une marge indésirable sur les textes

Cela ne m’avait pas frappé jusqu’à maintenant (et ce n’est pas seulement dans les navigateurs Webkit). Sur tous les textes tels que les balises p balises h1 , etc., il y a un espace supplémentaire au-dessus du texte.

En chrome j’ai trouvé ceci:

feuille de style de l’agent utilisateur

 -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; 

Cela rend l’alignement incorrect à certains endroits. Et oui, j’utilise une feuille de style de réinitialisation et aucun remplissage ni marge n’est ajouté. A peu près une configuration de base. Pourquoi est-ce et comment le résoudre?

    Vous pouvez également modifier directement ces atsortingbuts comme suit:

     -webkit-margin-before:0em; -webkit-margin-after:0em; 

    Fonctionne pour moi dans Chrome / Safari. J’espère que cela pourra aider!

    Ces -webkit-margin sont écrasées par une margin: 0; padding: 0; margin: 0; padding: 0; . Ne vous inquiétez pas pour eux.

    Espace supplémentaire? Peut-être avez-vous défini la line-height:

    J’ai eu le même problème. Affichage correct dans Firefox mais pas dans Chrome.

    J’ai regardé de plus près http://meyerweb.com/eric/tools/css/reset/ et j’ai constaté que je n’avais pas déclaré une hauteur de ligne générale pour la balise body dans ma feuille de style. Réglez-le sur 1.2 et recréez la mise en page correcte dans les deux navigateurs.

    Il suffit de supprimer les espaces entre les balises, par exemple

     

    devient:

     

    J’ai eu le même problème. Espace supplémentaire entre les liens de menu. Aucune des solutions ci-dessus n’a fonctionné. Ce qui a fonctionné pour moi, c’était une marge négative. Faites juste quelque chose comme ça:

     margin: 0 -2px; 

    NOUVEL ÉDITION:

    Cela n’a rien à voir avec -webkit-margins. Votre problème est très probablement lié aux éléments en ligne. Cela se produit parce que vous avez des espaces ou des sauts de ligne entre vos éléments en ligne. Pour résoudre ce problème, vous avez plusieurs options:

    • supprimer tous les espaces et les sauts de ligne entre les éléments en ligne
    • ignorer la balise de fermeture d’élément – par exemple
    • (HTML5 ne tient pas compte)

    • marge négative (comme indiqué ci-dessus – problèmes avec IE6 / 7 – qui se soucie, mise à niveau;)
    • définir font-size: 0; au conteneur d’élément en ligne problématique (a des problèmes avec Android et si la taille de police avec ems)
    • abandonner en ligne et utiliser le flotteur (de cette façon, vous perdez l’alignement du texte: centre)

    Expliqué plus précisément et exemples par CHRIS COYIER

    J’avais ce même problème avec ma

    . J’ai essayé de définir la margin:0; , mais ça n’a pas marché.

    J’ai trouvé que je commentais habituellement les lignes dans mon CSS en utilisant // . Je ne l’ai jamais remarqué car il n’y avait pas eu de problèmes auparavant. Mais lorsque j’ai utilisé // dans la ligne avant de déclarer

    , le navigateur ignorait complètement la déclaration. Lorsque j’ai échangé // pour /**/ j’ai pu ajuster la marge.

    Morale de cette histoire: Utilisez toujours la syntaxe de commentaire appropriée!

    Pour moi, la photo était:

     * {margin:0;padding:0;} 

    Firefox (FF) et Google Chrome affichent tous deux des marges de 0.67em. FF a montré sa marge par défaut, mais a rayé, mais l’a appliquée quand même. GC a montré sa marge par défaut (-webkit-margin-before …) non croisée.

    j’ai appliqué

     * {margin:0;padding:0; -webkit-margin-before: 0; -webkit-margin-after: 0;} 

    mais en vain, bien que GC montre maintenant sa marge par défaut franchie.

    J’ai découvert que je pouvais appliquer soit

     line-height: 0; 

    ou

     font-size: 0; 

    pour obtenir l’effet désiré. Cela a du sens, si l’on suppose, que la marge est du type .67em. Si quelqu’un pouvait donner une explication, pourquoi les navigateurs rendent-ils nos vies misérables en appliquant une marge non amovible, dépendante de la hauteur de la ligne, je vous en serais très reconnaissant.

    Pour moi, dans Chrome, c’était un début de padding-start 40px qui causait cela. J’ai fait ce qui suit:

     ul { -webkit-padding-start: 0em; } 
      -webkit-margin-before: 0em; -webkit-padding-start: 0; -webkit-margin-after: 0em; 

    Cela a résolu pour moi quand j’avais ce problème exact.

    J’ai eu le même problème. Soudain, une des trois cellules de la table contenant des données, son en-tête a été déplacée un peu. Mon problème a simplement été résolu en ajoutant ceci:

     table td { vertical-align: top; } 

    On dirait qu’un autre élément dans une feuille de style «supérieure» disait à mes données de se centrer dans la cellule, au lieu de simplement restr au top.

    Je suppose que c’est juste stupide, et n’était pas vraiment un problème … mais la prochaine personne à lire ce sujet pourrait avoir la même erreur stupide que moi 🙂

    Prends soin!

    Si user agent stylesheet , c’est parce que la propriété tag n’a pas été correctement définie dans votre feuille de style CSS.

    Il est probable qu’une faute de frappe, une parenthèse ou un point-virgule oublié divise votre feuille de style AVANT d’atteindre les parameters de propriété de la balise auxquels votre page se réfèrera ultérieurement ou «aura besoin».

    Exécutez votre CSS via la vérification des erreurs, comme CSS LINT et corrigez les erreurs éventuellement détectées.