[FIXED] What is the difference between -fx-padding and -fx-label-padding in JavaFX CSS?

Issue

In JavaFX CSS, a Label seems to have 2 CSS padding properties.

Label has all properties of Labeled, and under that we have -fx-label-padding.

However, Labeled also has all properties of Control, which has all properties of Region. Under that we find -fx-padding.

To me, those two properties seem to do the exact same thing. Can someone explain the difference between them, why might we need 2, and when to prefer one to another?

Solution

The -fx-label-padding is especially used for RadioButton and CheckBox.

Here is a little MCVE that demonstrates the aim of this :

public class MainApp extends Application {

   /*
    * (non-Javadoc)
    * @see javafx.application.Application#start(javafx.stage.Stage)
    */
   @Override
   public void start(Stage primaryStage) throws Exception {
      BorderPane root = new BorderPane();
      root.getStylesheets().add(this.getClass().getResource("MyPadding.css").toExternalForm());
      Line line1 = new Line(-1, 1, 1, -1);
      Line line2 = new Line(-1, -1, 1, 1);

      HBox hb = new HBox(20.0);
      // Labels
      VBox vbLabels = new VBox(10.0);
      Label label = new Label("Hello no padding");
      label.setGraphic(Shape.union(line1, line2));
      label.getStyleClass().add("no-padding");
      Label label1 = new Label("Hello padding");
      label1.setGraphic(Shape.union(line1, line2));
      label1.getStyleClass().add("only-padding");
      Label label2 = new Label("Hello label-padding");
      label2.setGraphic(Shape.union(line1, line2));
      label2.getStyleClass().add("only-label-padding");
      Label label3 = new Label("Hello both paddings");
      label3.setGraphic(Shape.union(line1, line2));
      label3.getStyleClass().add("both-padding");
      vbLabels.getChildren().addAll(label, label1, label2, label3);

      // Radio buttons
      VBox vbRadios = new VBox(10.0);
      RadioButton radio = new RadioButton("Radio no padding");
      radio.getStyleClass().add("no-padding");
      RadioButton radio1 = new RadioButton("Radio only padding");
      radio1.getStyleClass().add("only-padding");
      RadioButton radio2 = new RadioButton("Radio label-padding");
      radio2.getStyleClass().add("only-label-padding");
      RadioButton radio3 = new RadioButton("Radio both paddings");
      radio3.getStyleClass().add("both-padding");
      vbRadios.getChildren().addAll(radio, radio1, radio2, radio3);

      // Checkboxes
      // Due to the bug (found in https://bugs.openjdk.java.net/browse/JDK-8089059) it is not really demonstrative.
      VBox vbChecks = new VBox(10.0);
      CheckBox check = new CheckBox("My Check 0");
      check.getStyleClass().add("no-padding");
      CheckBox check1 = new CheckBox("My Check 1");
      check1.getStyleClass().add("only-padding");
      CheckBox check2 = new CheckBox("My Check 2");
      check2.getStyleClass().add("only-label-padding");
      CheckBox check3 = new CheckBox("My Check 3");
      check3.getStyleClass().add("both-padding");
      vbChecks.getChildren().addAll(check, check1, check2, check3);

      hb.getChildren().addAll(vbLabels, vbRadios, vbChecks);
      root.setCenter(hb);
      Scene scene = new Scene(root, 600.0, 500.0);
      primaryStage.setScene(scene);
      primaryStage.show();
   }

   public static void main(String[] args) {
      launch(args);
   }

}

And the CSS file called MyPadding.css :

.no-padding {
    -fx-border-color: black;
    -fx-label-padding: 0 0 0 0;
    -fx-padding : 0 0 0 0;
}

.only-padding {
    -fx-border-color : red;
    -fx-label-padding: 0 0 0 0em;
    -fx-padding : 0 0 0 2em;
}

.only-label-padding {
    -fx-border-color: blue;
    -fx-label-padding: 0 0 0 2em;
    -fx-padding: 0 0 0 0em;
}

.both-padding {
    -fx-border-color: green;
    -fx-label-padding: 0 0 0 2em;
    -fx-padding : 0 0 0 2em;
}

That result in :

Observation

The checkboxes are displayed weirdly with Java 8 (because of this known defect).

RadioButton example shows that -fx-label-padding enables the user to set padding between the radio and the text while -fx-padding set padding to all the component.

-fx-label-padding and -fx-padding are added each other for Label.

I believed it was also used for adding a padding between the text and the graphic of a Label but apparently not.

Answered By - Pagbo