How do I add margin to a JavaFX element using CSS?

Question

I have the following fragment of FXML:

Answer 1

Probably really late to the party, but I use another approach which might be helpful for others too.

There's no -fx-margin: 5px; CSS property for JavaFX buttons, but you can workaround the behaviour with a combination of -fx-padding, -fx-border-insets and -fx-background-insets.

For example a button with a 5px margin.

.button-with-margin {
    -fx-padding: 5px;
    -fx-border-insets: 5px;
    -fx-background-insets: 5px;
}

Alternatively you can also define a higher padding and lower insets values in case you want a padding and a margin.