[CSS] Button verhält sich anders als span bei gleichen computed styles

[Krutius]

Hallo

Ich habe ein kleines Problem mit vertikaler Zentrierung. Bei einem Button dessen Höhe ich vergrössert habe, ist text innerhalb des Buttons vertikal mittig zentriert. Bei einem span mit display:inline-block nicht.

Selbst wenn ich in der button variante alle "Computed Styles" via WebKit inspector (Chrome) kopiere, und dem span zuweise, verändert sich das verhalten! Die "Computed Styles" bleiben allerdings gleich.


1) span:

You do not have permission to view link please Anmelden or Registrieren

2) button:

You do not have permission to view link please Anmelden or Registrieren

3) span, wo ich alle computed styles des buttons draufgehauen hab:

You do not have permission to view link please Anmelden or Registrieren

4) und das ganze noch als button:

You do not have permission to view link please Anmelden or Registrieren

Eigentlich müssten doch heutzutage sämtliche Eigenschaften eines Tags via CSS überschreibbar sein? Weiss grad jemand, warum dem so ist, und wie ich dem beikomme, ohne einen Dschungel an helper-tags zu bauen?

Demnach müssten doch zumindest die beispiele 2, 3 und 4 absolut identisch sein, da gleiche computed styles?

Mfg

Krutius

 

[Kugelfisch]

Ich kann das Problem nachvollziehen, die vertikale Zentrierung innerhalb der button-Elemente entspricht meines Erachtens nicht der gemäss CSS 2.1 erwarteten Darstellung (das Verhalten würde ich von einem Element mit display:table-cell und vertical-aligniddle erwarten). Dass sich diverse UI-Elemente (input, button, select) hinsichtlich ihrer Darstellung `seltsam` verhalten und sich die Darstellung teilweise kaum zuverlässig kontrollieren lässt, ist jedoch bekannt und leider auch in modernen Browsern aufgrund der häufig gewünschten Integration in das Betriebssystem-Look-and-Feel nicht vollständig behoben.

Um den Text innerhalb des span-Elements vertikal zu zentrieren, hast du mehrere Möglichkeiten - du könntest etwa das span-Element als table-cell, das übergeordnete Element als table darstellen lassen und die abweichende Wirkung der vertical-align-Eigenschaft für Tabellen ausnutzen, siehe

You do not have permission to view link please Anmelden or Registrieren

. Alternativ kannst du (sofern sichergestellt ist, dass es immer nur eine Zeile geben wird, was in deinem Fall wohl gegeben ist) die Zeilenhöhe deiner Elementhöhe anpassen (line-height:40px,

You do not have permission to view link please Anmelden or Registrieren

).