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

Question

I have the following fragment of FXML:

<VBox fx:id="paneLeft">
    <TextField promptText="Password"/>
    <Button fx:id="btnLogin" text="Login" maxWidth="10000"/>
    <Hyperlink text="Registration"/>
</VBox>

Is it possible to add a spacing of 10px between the Button and Hyperlink elements using CSS?

Thanks in advance!

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.