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

It seems you cannot. JavaFX has a limited support on CSS right now.

However, the CSS padding and margins properties are supported on some JavaFX scene graph objects.

says the official CSS Reference Guide. So workaround could be to use extra other layout, another VBox for instance:

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

---

Update:
Found a bit more perfect way of doing it, but still not by CSS.

 <?import javafx.geometry.Insets?>

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

This avoids defining an unnecessary extra layout.

Answer 2

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.