-webkit-margin fügt unerwünschten Rand für Texte hinzu

Das hatte mich bis jetzt nicht getroffen (und das nicht nur in Webkit-Browsern). Auf allen Texten wie pTags, h1Tags usw. befindet sich über und unter dem Text ein zusätzlicher Platz.

In Chrom habe ich folgendes gefunden:

Stylesheet für Benutzeragenten

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

Dies macht die Ausrichtung an einigen Stellen falsch. Und ja, ich verwende ein Reset-Stylesheet und es werden keine Auffüllungen oder Ränder hinzugefügt. So ziemlich eine Grundeinstellung. Warum ist das so und wie löse ich es?

Sie können diese Attribute auch direkt wie folgt ändern:

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

Funktioniert für mich in Chrome / Safari. Hoffentlich hilft das!

Diese -webkit-marginwerden von überschrieben margin: 0; padding: 0;. Mach dir keine Sorgen um sie.

Zusätzlicher Platz? Vielleicht hast du gesetzt line-height:?

Ich hatte das gleiche Problem. In Firefox korrekt angezeigt, jedoch nicht in Chrome.

Ich habe mir http://meyerweb.com/eric/tools/css/reset/ genauer angesehen und festgestellt, dass ich in meinem Stylesheet keine allgemeine Zeilenhöhe für das Body-Tag angegeben habe. Setzen Sie es auf 1.2 und das hat das richtige Layout in beiden Browsern wiederhergestellt.

Entfernen Sie einfach das Leerzeichen zwischen den Tags, z

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

wird:

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

Ich hatte das gleiche Problem. Zusätzlicher Platz zwischen den Menüverknüpfungen. Keine der oben genannten Lösungen hat funktioniert. Was für mich funktioniert hat, war eine negative Marge. Mach einfach so etwas:

margin: 0 -2px;

NEUE BEARBEITUNG:

Dies hat nichts mit -webkit-Rändern zu tun. Höchstwahrscheinlich tritt Ihr Problem bei Inline-Elementen auf. Dies liegt daran, dass zwischen Ihren Inline-Elementen Leerzeichen oder Zeilenumbrüche stehen. Um dies zu beheben, haben Sie viele Möglichkeiten:

• Entfernen Sie alle Leerzeichen und Zeilenumbrüche zwischen Inline-Elementen
• Element zum Schließen des Elements überspringen - zum Beispiel </li>(HTML5 ist das egal)
• negative Marge (wie oben angegeben - Probleme mit IE6 / 7 - wen interessiert das, Upgrade;)
• set font-size: 0;zu problematischen Inline - Elemente Behältern (hat Probleme mit Android und wenn font-Sizing mit EMS)
• Inline aufgeben und float verwenden (auf diese Weise verlieren Sie die Textausrichtung: Mitte)

Genauer erklärt und Beispiele von CHRIS COYIER

Ich hatte das gleiche Problem mit meinem <h3>Tag. Ich habe versucht einzustellen margin:0;, aber es hat nicht funktioniert.

Ich stellte fest, dass ich gewöhnlich Zeilen in meinem CSS mit auskommentierte //. Ich habe es nie bemerkt, weil es vorher keine Probleme verursacht hatte. Aber als ich //in der Zeile vor der Deklaration verwendet habe <h3>, hat es den Browser veranlasst, die Deklaration vollständig zu überspringen. Als ich gehandelt out //für /**/Ich konnte den Rand anzupassen.

Moral dieser Geschichte: Verwenden Sie immer die richtige Kommentarsyntax!

Für mich war das Bild:

* {margin:0;padding:0;}

Firefox (FF) und Google Chrome setzen beide unabhängig voneinander einen Rand von 0,67 em. FF zeigte seine Standardmarge, wurde jedoch durchgestrichen, aber trotzdem angewendet. GC zeigte seine Standardmarge (-webkit-margin-before ...) ungekreuzt.

Ich bewarb mich

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

aber ohne Erfolg, obwohl GC nun zeigte, dass seine Standardmarge überschritten wurde.

Ich habe herausgefunden, dass ich mich auch bewerben kann

line-height: 0;

oder

font-size: 0;

um den gewünschten Effekt zu erzielen. Dies ist sinnvoll, wenn man davon ausgeht, dass der Rand vom Typ .67em ist. Wenn jemand eine Erklärung geben könnte, warum Browser unser Leben durch Anwenden eines von der Zeilenhöhe abhängigen, nicht entfernbaren Randes unglücklich machen, wäre ich wirklich dankbar.

Für mich in Chrome waren es etwa 40 Pixel padding-start, die dies verursachten. Ich habe Folgendes getan, das funktioniert hat:

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

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

Dies löste es für mich, als ich genau dieses Problem hatte.

Fügen Sie in Ihrer CSS-Datei Folgendes hinzu.

* {
  -webkit-margin-before: 0em !important;
  -webkit-margin-after: 0em !important;
}

'*' wählt alle CSS-Elemente aus und überschreibt den Webkit-Rand.

Ich hatte das gleiche Problem. Plötzlich wurde eine meiner drei Tabellenzellen mit Daten, deren Kopfzeile etwas nach unten verschoben wurde. Mein Problem wurde einfach gelöst, indem ich Folgendes hinzufügte:

table td
{
    vertical-align: top;
}

Es scheint, als hätte ein anderes Element in einem "höheren" Stylesheet meine Daten angewiesen, sich in der Zelle zu zentrieren, anstatt nur oben zu bleiben.

Ich denke, es ist einfach nur dumm und war nicht wirklich ein Problem ... aber die nächste Person, die dieses Thema liest, hat möglicherweise den gleichen dummen Fehler wie ich :)

Pass auf!

Wenn dies user agent stylesheeteintritt, liegt dies daran, dass die Tag-Eigenschaft in Ihrem CSS-Stylesheet nicht richtig definiert wurde.

Es besteht die Möglichkeit, dass ein Tippfehler, eine vergessene Klammer oder ein Semikolon Ihr Stylesheet auflöst, bevor Sie die Einstellungen für die Tag-Eigenschaften erreichen, auf die Ihre Seite später verweist oder die Sie "benötigen".

Führen Sie Ihr CSS durch eine Fehlerprüfung wie CSS LINT aus und beheben Sie die eventuell erkannten Fehler.