The width of button using default modena styles in JavaFX

Question

Take a look at the following image:

There are two elements on it - Button and Label with the same text.

Button has width 54 px , lable has width 36 px . The difference is: 54px - 36px = 18px .

I've studied modena.css but still can't understand where these 18px come from.

Could anyone explain?

Answer 1

In the current version of modena.css , line 420, button has padding defined by

-fx-padding: 0.333333em 0.666667em 0.333333em 0.666667em; /* 4 8 4 8 */

On windows, 0.6666667em is 8 pixels, on a Mac it is slightly more, so that padding on the left and right sides accounts for the difference in width.