How to add padding between TitledPanes in an Accordion in JavaFX

问题

I would like to add padding between TitledPanes in an Accordion (spacing in Accordion).

The problem is that, when a TitledPane is expanded, the look and feel of the next TitledPane is broken.

TitledPanes unexpanded

One TitledPane expanded

I have used the following CSS:

.titled-pane {
    -fx-skin: "com.sun.javafx.scene.control.skin.TitledPaneSkin";    
    -fx-text-fill: -fx-text-base-color;
    -fx-padding: 0.5em;
}

One image show the separation between 2 TitledPanes unexpanded, and another image show the look an feel of the second TitledPane after open the first one.

回答1:

It's a bug (I've created a bug report: JDK-8162599).

As a workaround, if you specify only the bottom padding of TitledPanes (rather than the top), the spacing between TitledPanes in the Accordion is correct.

CSS to add bottom padding

.accordion > .titled-pane {
    -fx-padding: 0 0 0.5em 0;
}

An example Accordion looks like this:

来源：https://stackoverflow.com/questions/38462637/how-to-add-padding-between-titledpanes-in-an-accordion-in-javafx