web-dev-qa-db-fra.com

-webkit-margin ajoute une marge non désirée 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 dans les balises p telles que, les balises h1, etc. 

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 ne sont ajoutés. Plutôt une configuration de base. Pourquoi est-ce et comment puis-je le résoudre?

csspadding
72
tbleckert

Vous pouvez également modifier directement ces attributs comme suit:

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

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

47
JacobEvelyn

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

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

41
atlavis

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

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

8
Edwin - EEDSGN

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 la marge négative… .. Faites juste quelque chose comme ça:

margin: 0 -2px;

NEW EDIT:

Cela n'a rien à voir avec -webkit-margin. Très probablement, votre problème se produit avec des é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:

  • supprime tous les espaces et sauts de ligne entre les éléments en ligne
  • ignorer la balise de fermeture d'élément - par exemple </li> (HTML5 ne s'en soucie pas)
  • marge négative (comme indiqué ci-dessus - problèmes avec IE6/7 - qui s'en soucie, mise à niveau;)
  • définir font-size: 0; sur le conteneur d'éléments en ligne problématique (a des problèmes avec Android et si le dimensionnement des polices avec ems)
  • abandonnez inline et utilisez float (de cette façon vous perdez text-align: center)

Expliqué plus spécifiquement et exemples par CHRIS COYIER

5
ruuter

Supprimez simplement les espaces entre les balises, par exemple.

<p id="one"></p>
<p id="two"></p>

devient:

<p id="one"></p><p id="two"></p>
5
Craig

J'avais ce même problème avec ma balise <h3>. J'ai essayé de régler margin:0;, mais cela n'a pas fonctionné.

J'ai trouvé que je commentais habituellement les lignes de mes CSS en utilisant //. Je ne l'ai jamais remarqué parce que cela n'avait posé aucun problème auparavant. Mais lorsque j'ai utilisé // dans la ligne avant de déclarer <h3>, le navigateur a complètement ignoré 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!

1
story

Pour moi, la photo était:

* {margin:0;padding:0;}

Firefox (FF) et Google Chrome ont tous deux mis des marges de 0,67 em indépendamment de . FF a montré sa marge par défaut, mais a été barré, mais l'a appliquée quand même . GC a montré sa marge par défaut (-webkit-margin-before ... ) décroisé.

J'ai appliqué

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

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

J'ai découvert que je pouvais postuler

line-height: 0;

ou

font-size: 0;

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

1
d_le_nen
    -webkit-margin-before: 0em;
    -webkit-padding-start: 0;
    -webkit-margin-after: 0em;

Cela a résolu le problème pour moi alors que je rencontrais ce problème. 

0
andromedainiative

Pour moi, sous Chrome, c’était quelque chose comme 40px padding-start J'ai fait ce qui suit qui a fonctionné:

ul {
    -webkit-padding-start: 0em;
}
0
Gaui