title: Remove insets in JavaFX TitledPane with CSS not working
body: <p>Based on a solution of James_D (<a href="https://stackoverflow.com/questions/23065096/how-to-set-remove-insets-in-javafx-titledpane">How to set/remove insets in JavaFX TitledPane</a>) that I've tried, it seems that removing insets from a JavaFX TitledPane through CSS does not work? It does update correctly in Scene Builder, but at runtime the insets remain unchanged. Even Scenic View 8.0 reports a padding of 9.6.</p>
  
  <p><strong>FXML example:</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  
  &lt;?import java.lang.*?&gt;
  &lt;?import java.util.*?&gt;
  &lt;?import javafx.scene.*?&gt;
  &lt;?import javafx.scene.control.*?&gt;
  &lt;?import javafx.scene.layout.*?&gt;
  
  &lt;AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" stylesheets="@newCascadeStyleSheet.css" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8" fx:controller="test3.FXMLDocumentController"&gt;
      &lt;children&gt;
        &lt;Accordion layoutX="14.0" layoutY="14.0" prefHeight="270.0" prefWidth="320.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"&gt;
          &lt;panes&gt;
            &lt;TitledPane animated="false" text="untitled 1"&gt;
              &lt;content&gt;
                &lt;AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0"&gt;
                       &lt;children&gt;
                            &lt;Button fx:id="button" layoutX="9.600000381469727" layoutY="9.600000381469727" prefHeight="124.0" prefWidth="318.0" text="Click Me!" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" /&gt;
                       &lt;/children&gt;
                    &lt;/AnchorPane&gt;
              &lt;/content&gt;
                &lt;/TitledPane&gt;
                &lt;TitledPane animated="false" text="untitled 2"&gt;
              &lt;content&gt;
                &lt;AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" /&gt;
              &lt;/content&gt;
            &lt;/TitledPane&gt;
            &lt;TitledPane animated="false" text="untitled 3"&gt;
              &lt;content&gt;
                &lt;AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" /&gt;
              &lt;/content&gt;
            &lt;/TitledPane&gt;
          &lt;/panes&gt;
        &lt;/Accordion&gt;
      &lt;/children&gt;
  &lt;/AnchorPane&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.titled-pane {
      -fx-text-fill: rgb(0,100,157);
  }
  .titled-pane:focused {
      -fx-color: -fx-base;
      -fx-text-fill: white;
  }
  .titled-pane &gt; .title {
      -fx-text-fill: rgb(0,100,157);
      -fx-font-weight: bold;
  }
  titled-pane &gt; .title  &gt; .label{
      -fx-text-fill: rgb(0,100,157);
      -fx-font-weight: bold;
  }
  .titled-pane:focused &gt; .title {
      -fx-color: rgb(0,100,157); 
      -fx-text-fill: white;
  }
  .titled-pane &gt; .title:hover {
      -fx-color: lightgrey;
  }
  .titled-pane &gt; * &gt; * &gt; AnchorPane {
      -fx-padding: 0px ;
  }
  </code></pre>
  
  <p><strong>View in Scene Builder: (Preview)</strong></p>
  
  <p><img src="https://i.stack.imgur.com/trc3y.png" alt="preview in scene builder"></p>
  
  <p><strong>View at runtime:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/dw1xW.png" alt="view at runtime"></p>
  
  <p>So it seems that the padding is not applied for some reason. In my main application I use a lot of <code>Accordion</code> containers. The other option was to add the padding in FXML code to the <code>AnchorPane</code> of the <code>TitledPane</code>, this works but is a time consuming job. Am I missing something in the CSS? </p>