如何使用CSS为JavaFX元素添加外边距？

Question

我有以下的FXML代码片段：

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

使用CSS是否可以在Button和Hyperlink元素之间添加10px的间距？

提前致谢！

- vbezhenar

---

将-fx-spacing应用于Uluk解决方案中的第一个VBox，虽然不完美，但至少可以通过CSS指定间距而不是在FXML中。 - jewelsea

Answer 1

可能已经来晚了，但我使用另一种方法，这对其他人也可能有所帮助。

JavaFX按钮没有-fx-margin: 5px; CSS属性，但是您可以通过结合-fx-padding、-fx-border-insets和-fx-background-inset来解决该问题。

例如，一个带有5像素边距的按钮。

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

或者，如果您需要设置填充和边距，您还可以定义更高的填充和更低的插入值。

- mh-dev

---

正是我所需要的，现在为时不晚。非常感谢！ - Moritz Schmidt

请参考 https://dev59.com/QJ_ha4cB1Zd3GeqPz4EH#42466235 查看 insets 属性的文档说明。 - koppor

Answer 2

看起来你不能。目前JavaFX对CSS的支持有限。

然而，官方的CSS参考指南表示，某些JavaFX场景图对象支持CSS的padding和margin属性。

因此，解决方法可能是使用其他布局，例如另一个VBox：

<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>

---

更新：
找到了一种更加完美的方法，但仍然不是通过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>

这样可以避免定义不必要的额外布局。

- Uluk Biy