50

I have a collection of buttons:

VBox menuButtons = new VBox();
menuButtons.getChildren().addAll(addButton, editButton, exitButton);

I want to add some spacing between these buttons, without using a CSS style sheet. I think there should be a way to do this.

setPadding(); is for the Buttons in the VBox.
setMargin(); should be for the VBox itself. But I didn't find a way for the spacing between the buttons.

I'm glad for any ideas. :)

2

5 Answers 5

88

VBox supports spacing out of the box:

VBox menuButtons = new VBox(5);

or

menuButtons.setSpacing(5);
4
  • 1
    Thx... :$ I tought this would be the number of elements in it. Nerver tought that this'd be so simple.
    – codepleb
    Commented Aug 21, 2013 at 21:27
  • 12
    Btw: In FXML it looks like this: <VBox spacing="5">...</VBox>
    – codepleb
    Commented Aug 14, 2016 at 15:37
  • 2
    the amounts of votes on this straightforward question really put this class' API in perspective :) Commented Jan 27, 2021 at 14:01
  • 1
    @codepleb the FXML version is what I was looking for. Thanks a lot!
    – Zac
    Commented Mar 29, 2021 at 19:51
21

Just call setSpacing method and pass some value. Example with HBox (it's same for VBox):

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.HBox;
import javafx.scene.layout.HBoxBuilder;
import javafx.stage.Stage;

public class SpacingDemo extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage stage) {
        stage.setTitle("Spacing demo");

        Button btnSave = new Button("Save");
        Button btnDelete = new Button("Delete");
        HBox hBox = HBoxBuilder.create()
                .spacing(30.0) //In case you are using HBoxBuilder
                .padding(new Insets(5, 5, 5, 5))
                .children(btnSave, btnDelete)
                .build();

        hBox.setSpacing(30.0); //In your case

        stage.setScene(new Scene(hBox, 320, 240));
        stage.show();
    }
}

And this is how it looks:

Without of spacing:

enter image description here

With spacing:

enter image description here

3
  • Nice answer! Big Thx! :) I would have chosen this, if Sergey Grinev didn't give a solution where I can set this directly in the constructor.
    – codepleb
    Commented Aug 21, 2013 at 21:25
  • 2
    Builder are depreciated in javafx 8, you should use standard way to create the object and set its spacing. see this post on oracle forum
    – Flo C
    Commented Aug 22, 2013 at 9:19
  • @FloC I believe you. But I'm using Java 1.7 update 21. Nevertheless, thanks for pointing that. Commented Aug 22, 2013 at 10:39
16

If you're using FXML, use the spacing attribute:

<VBox spacing="5" />
9

As others have mentioned you can use setSpacing().

However, you can also use setMargin(), it is not for the pane (or box in your words), it is for individual Nodes. setPadding() method is for the pane itself. In fact, setMargin() takes a node as a parameter so you can guess what it's for.

For example:

HBox pane = new HBox();
Button buttonOK = new Button("OK");
Button buttonCancel = new Button("Cancel");
/************************************************/
pane.setMargin(buttonOK, new Insets(0, 10, 0, 0)); //This is where you should be looking at.
/************************************************/
pane.setPadding(new Insets(25));
pane.getChildren().addAll(buttonOK, buttonCancel);
Scene scene = new Scene(pane);
primaryStage.setTitle("Stage Title");
primaryStage.setScene(scene);
primaryStage.show();

You could get the same result if you replaced that line with

pane.setSpacing(10);

If you have several nodes that should be spaced, setSpacing() method is far more convenient because you need to call setMargin() for each individual node and that would be ridiculous. However, setMargin() is what you need if you need margins(duh) around a node that you can determine how much to each side because setSpacing() methods places spaces only in between nodes, not between the node and the edges of the window.

1
  • 2
    Good post but I think it is a bit cleaner to do HBox.setMargin(Node, Insets) rather than pane.setMargin(Node, Insets) since setMargin is a static function. I don't know if either way makes a practical difference.
    – Max
    Commented Oct 19, 2017 at 15:27
3

The same effect as the setSpacing method can also be achieved via css:

VBox {
    -fx-spacing: 8;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.