Bild Button: Seltsamer Raum

StackOverflow https://stackoverflow.com/questions/3912731

  •  29-09-2019
  •  | 
  •  

Frage

Zuerst wird das Ergebnis in Firefox 4 Beta 8:

Knopf vs Div http://b.imagehost.org/0419/buttonSpace.png

Das gezeigte frühere Element ist ein mit einer button img letztere ist ein div mit einer img. Wie Sie im ersten Fall sehen können, gibt es einigen seltsamen Raum zwischen der Grenze der img und der Grenze der button. Ich frage mich, wie kann ich es entfernen.

Hier ist die CSS-Datei: 

* {
    margin: 0;
    padding: 0;
}

button, img, div {
    border: 1px solid black;
}

img {
    display: block;
}
War es hilfreich?

Lösung

Testen des obige Testfall in anderen Browsern haben gezeigt, dass dies wahrscheinlich nicht ein CSS Problem ist aber ein Fehler in Firefox. Nach ein wenig Recherche fand ich diesen Bug-Report: Bug 140563 - <button> ignoriert CSS-Style padding:0

In diesem Fehlerbericht gibt es eine Lösung für das Problem: 

button::-moz-focus-inner {padding:0; border:0}

Andere Tipps

Ich glaube, Sie einen width für die div setzen müssen

Es sieht aus wie die padding nach dem Sie fragen, nicht angewendet werden. Haben Sie versucht, es explizit auf die Schaltfläche Einstellung?

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top