Padding von Button ändern
 

Hallo,

ich habe bei der Programmierung einer Webseite folgendes Problem: Ich möchte die Breite von einem Button verkleinern. Hierzu würde ich gerne den Wert für Padding verändern. Eine fixe Breite hat der Button nicht, soll er auch nicht bekommen.

vorher: .button { padding: 15px 20px; }
nachher: .button { padding: 15px 10px; }

Leider tut sich da gar nix... Ein anderes Style-Attribut, was den Wert überschreibt, finde ich nicht. Woran kann das noch liegen?

Vielen Dank schonmal

Sorry, das wichtigste vergessen: https://www.12test.de/button-padding.html

Grundsätzich sollte vermieden werden eine Klasse .button wie das Element button zu nennen.

Das Problem liegt darin, dass durch die Änderung des Innenabstands padding nicht die Größe eines Elements geändert wird. Sondern nur der Platz im Element. Die Größe eines Elements wird durch width und / oder height geändert.

Ohne Angabe nehmen Blockelemente den zur Verfügung stehenden Platz ein.

Hallo,

danke für die Antwort.

Die Idee mit der festen Breite und Höhe hatte ich auch schon.

Jedoch bekomme ich dadurch an anderer Stelle unerwünschte Effekte, da die Beschriftung je nach Button unterschiedlich lang ausfällt. Hinzu kommt eine unterschiedliche Darstellung durch das responsive Design, wodurch sich Höhe und Breite verändern.

Wenn ich jetzt die Höhe oder Breite fixe, bekomme ich entweder überstehende Schriften oder muss zu hohe oder zu breite Buttons verwenden. Das sieht dann am Ende auch nix aus.

Du kannst auch mit min-width / max-width (bzw. height) arbeiten.
Ohne das gewünschte Design zu kennen kann man hier aber auch mehr raten als wirklich helfen.

O.k. danke für eure Vorschläge. Ich habe es jetzt so gelöst, dass ich einfach die Spalten mit den Buttons schmaler gemacht habe, damit sich der Button gar nicht weiter ausbreiten kann.