Remove Padding/Margin from Javafx Label

Remove padding/margin from JavaFX Label

You can achieve that by adding -fx-padding: -10 0 0 0; to the list of your styles.

For more flexible solution you can use FontMetrics information:

FontMetrics metrics = Toolkit.getToolkit().getFontLoader().getFontMetrics(label.getFont());
label.setPadding(new Insets(-metrics.getDescent(), 0, 0, 0));

NB: You need to call that code after scene.show(). Before that graphics engine is not ready to provide correct metrics.

How to remove the padding of a button with nested label with JavaFX CSS

You could try negative margins.

FXML

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.StackPane?>

<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="77.0">
         <graphic>
            <HBox>
               <children>
                  <Label maxHeight="1.7976931348623157E308" style="-fx-background-color: black; -fx-text-fill: white;" text="Label">
                     <HBox.margin>
                        <Insets bottom="-3.0" left="-7.0" right="-3.0" top="-3.0" />
                     </HBox.margin>
                     <padding>
                        <Insets left="5.0" right="5.0" />
                     </padding>
                  </Label>
               </children>
            </HBox>
         </graphic>
      </Button>
   </children>
</StackPane>

JavaFX ListView - remove spacing / padding / margin between cells

If you look at the default CSS stylesheet for JavaFX, modena.css, you'll see:

.list-cell {
    -fx-padding: 0.25em 0.583em 0.25em 0.583em; /* 3 7 3 7 */
}

This is where the padding for the ListCells is coming from. To remove this padding simply add your own stylesheet which contains:

.list-cell {
    -fx-padding: 0px;
}

Or call setStyle for each of your ListCells:

setStyle("-fx-padding: 0px;");

The second option would best be done by using a custom cell factory.

listView.setCellFactory(v -> new ListCell<>() {

    {
        setStyle("-fx-padding: 0px");
    }

    @Override
    protected void updateItem(Object item, boolean empty) {
        super.updateItem(item, empty);
        if (empty || item == null) {
            setText(null);
            setGraphic(null);
        } else {
            // your custom display logic
        }
    }

});

Also, after some quick testing with JFoenix it looks like using the above will also work for JFXListCell; though you have to be careful about overriding updateItem because JFXListCell does a lot in its implementation.

How can i remove the space inside a Separator?

The separator consists out of two Elements.

The Separator root node with css class separator
and an child element Region with css class line

If you want to remove the line in the middle of the black box than you have to modify the region(line) child and set its border insets and width to 0px

for example:

Separator separator = new Separator();
separator.setStyle(""
    + "-fx-border-width: 1px;"
    + "-fx-border-color: black;"
    + "-fx-padding: 0px;"
    + "");

stage.show()

And than after stage.show() you will have access to its childern via lookup or getChildrenUnmodifiable()

Node line = separator.lookup(".line");
line.setStyle(""
    + "-fx-border-insets: 0px;"
    + "-fx-border-width: 0px;"
    + "");

or

separator.getChildrenUnmodifiable().get(0).setStyle(""
    + "-fx-border-insets: 0px;"
    + "-fx-border-width: 0px;"
    + "");

and third the option of With metrics

FontMetrics metrics = Toolkit.getToolkit().getFontLoader().getFontMetrics(label.getFont());
label.setPadding(new Insets(-metrics.getDescent(), 0, 0, 0));

and fourth option of With Bounds which is not applyable for all Nodes and does not work in this case.

Text text = new Text();
text.setBoundsType(TextBoundsType.VISUAL);

And as last option you could add an CSS file which changes the style of the .line class

App.css:

.line {
    -fx-border-width: 0px;
    -fx-border-insets: 0px;
}

.separator {
    -fx-padding: 0px;
    -fx-border-insets: 0px;
    -fx-border-width: 1px;
    -fx-border-color: black;
}

And than you just have to apply this css to your scene.

scene.getStylesheets().add("App.css");

If you dont know about it already maybe you should checkout Scenic View which is a good tool if you want to inspect JavaFx applications.

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

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

HBox.setMargin(areaRight, new Insets(0, 0, 0, 50));

<VBox fx:id="areaRight" prefHeight="200.0" prefWidth="100.0" style="-fx-background-color: red;">
     <HBox.margin>
        <Insets left="50.0" />
     </HBox.margin>
  </VBox>

for (int i=0; i < NUM_OP_BUTTONS; i++) {
    operatorImages[i] = new ImageView(
            new Image(Java.class.getResourceAsStream(
                    "art" + File.separator + "Square.png")));
    operatorButtons[i] = new Button();
    operatorButtons[i].setGraphic(operatorImages[i]);
    operatorButtons[i].setPadding(Insets.EMPTY);
    operatorButtons[i].setId("orange-"+(i));
    flow.getChildren().add(operatorButtons[i]);
}

for (int i=0; i < NUM_BUTTONS; i++) {
    centerImages[i] = new ImageView(
            new Image(Java.class.getResourceAsStream(
                    "art" + File.separator + "Square.png")));
    centerButtons[i] = new Button();
    centerButtons[i].setGraphic(centerImages[i]);
    centerButtons[i].setPadding(Insets.EMPTY);
    centerButtons[i].setId("button-"+(i));
    flow.getChildren().add(centerButtons[i]);
}

public class FirstLinePaddedTextAread extends javafx.scene.control.TextArea {
    private int offset;

    public FirstLinePaddedTextAread(String padded) {
        this.offset = padded.length();
        this.setText(padded);
        this.positionCaret(offset);

        this.setOnKeyPressed(event -> consumeIfCaretIsOnReadOnlyArea(event));
        this.setOnKeyTyped(event -> consumeIfCaretIsOnReadOnlyArea(event));
        this.setOnKeyReleased(event -> consumeIfCaretIsOnReadOnlyArea(event));
    }

    private void consumeIfCaretIsOnReadOnlyArea(javafx.scene.input.KeyEvent event) {
        if (getCaretPosition() < offset) {
            if (!event.getCode().isNavigationKey())
                event.consume();

        } else if (getCaretPosition() == offset) {
            if (event.getCode() == javafx.scene.input.KeyCode.DELETE
                    || event.getCode() == javafx.scene.input.KeyCode.BACK_SPACE) {
                event.consume();
            }
        }
    }
}