Button beschriften, Text ausrichten

[silberfuchs]

Hallo,
für ein Projekt brauche ich einen sehr schmalen Button. Wenn ich einen Beschriftung festlege, passt sich die Höhe des Button s offensichtlich der Textgröße an, der Text steht mittig (vertical). Wenn ich mit CSS dem Buton eine geringere Höhe gebe, bleibt der Textabstand zum oberen Rand des Buttons gleich, d. h. der Text wird unten abgeschnitten, obwohl oben noch Platz ist, Habe es mit "padding" und style="top:0px;"
versucht, aber ohne Erfolg. Mir ist klar das die Höhe des Buttons der Schriftgröße insgesamt Grenzen setzt.
Kann man den Button nicht aber doch "ausfüllen" ??
Siberfuchs

 

[PumkinPatrick]

Warum machst du die Schrift nicht auch kleiner?
Der Text sollte oben anliegen, es sei denn du hast irgendwo ein Padding oder "line-height" vergeben. Du solltest Stylsheet´s in eine eigene Datei schreiben.
Ansonsten kannst du das auch mit einer negativ Angabe für "top" machen z.B top:-2px; o.ä.

Ein Link ist immer hilfreich...

 

[Bennyville]

Wo wird der Button denn verwendet? Im Formular?

 

[silberfuchs]

Der entsprechende Teil des Quelltextes sieht so aus:
<div>
<button type="button" style="height:8mm; width:30mm;" >
<p style="top:-5px; font-weight:bold; font-family:Arial;">
Text
</p>
</button>
</div>
Wenn ich statt "top:-5px" "line-height:0.1em" schreibe, sieht die Sache ganz gut aus, ich weiß nur nicht warum.
Ich nutze die html-Oberfläche für ein Lösungsverfahren eines techn. Problems, weil ja wohl jeder einen Browser auf dem Rechner hat. Die Anforderungen an die Ästhetik sind deshalb gering , ich spare mir deshalb "grafische " Buttons.
Wo sollte denn nach Deiner Meinung das "top" geschrieben werden ? in das "div"-Objekt oder den Textabsatz??
Danke aber schon mal für die schnelle Reaktion.
Silberfuchs

 

[Bennyville]

Wofür denn das <p>-Tag? Und wieso nutzt du „mm“?

Nimm das <p>-Tag ruhig raus. (Daher kommt auch der Abstand oben und unten.)
Dann kannst du den Abstand des Textes zur Ober-/Unterkante des Buttons mit „line-height“ steuern.

 

[silberfuchs]

Ja, warum hbe ich das p-tag genutzt? Ich dachte es wäre der Text (Beschriftung) einfacher zu formatieren.
Aber es geht , wie ich nach Deinem Vorschlag ausprobiert habe, auch ohne. Ja , warum einfach, wenn es doch auch kompliziert geht;).
Danke, Problem gelöst

 

[Bennyville]

Der Gedanke war ja gut. <span> wäre allerdings, wenn überhaupt, besser gewesen. mMn. :)

Aber dann passt es ja ;)