How to delete the margin around SmartFilterBar? - sapui5

Question

I have SmartFilterBar inside a SplitPane that looks as following:
and I would like to delete the spaces around the SmartFilterBar.
The code for the view:
<l:SplitPane requiredParentWidth="400" demandPane="true" id="default">
<Panel height="100%">
<smartFilterBar:SmartFilterBar id="smartFilterBar" entitySet="ZMM_C_CLASSIFICATION" search="_onSearch">
<smartFilterBar:controlConfiguration>
<smartFilterBar:ControlConfiguration key="ClassType" visibleInAdvancedArea="true" preventInitialDataFetchInValueHelpDialog="false"></smartFilterBar:ControlConfiguration>
<smartFilterBar:ControlConfiguration key="ClassNum" visibleInAdvancedArea="true" preventInitialDataFetchInValueHelpDialog="false"></smartFilterBar:ControlConfiguration>
</smartFilterBar:controlConfiguration>
</smartFilterBar:SmartFilterBar>
<Tree id="classTree" items="{path: 'Tree>/'}" toggleOpenState="onToggleOpenState">
<CustomTreeItem>
<FlexBox width="100%" alignItems="Center" justifyContent="SpaceBetween">
<items>
<Label text="{Tree>text}" wrapping="true"/>
<Button icon="sap-icon://display" type="Transparent" press="onItemPress"/>
</items>
</FlexBox>
</CustomTreeItem>
</Tree>
</Panel>
<l:layoutData>
<l:SplitterLayoutData size="30%"/>
</l:layoutData>
</l:SplitPane>
Update
I also tried:
<l:SplitPane requiredParentWidth="400" demandPane="true" id="default">
<l:content>
<smartFilterBar:SmartFilterBar id="smartFilterBar" entitySet="ZMM_C_CLASSIFICATION" search="_onSearch">
<smartFilterBar:controlConfiguration>
<smartFilterBar:ControlConfiguration key="ClassType" visibleInAdvancedArea="true" preventInitialDataFetchInValueHelpDialog="false"></smartFilterBar:ControlConfiguration>
<smartFilterBar:ControlConfiguration key="ClassNum" visibleInAdvancedArea="true" preventInitialDataFetchInValueHelpDialog="false"></smartFilterBar:ControlConfiguration>
</smartFilterBar:controlConfiguration>
</smartFilterBar:SmartFilterBar>
<Tree id="classTree" items="{path: 'Tree>/'}" toggleOpenState="onToggleOpenState">
<CustomTreeItem>
<FlexBox width="100%" alignItems="Center" justifyContent="SpaceBetween">
<items>
<Label text="{Tree>text}" wrapping="true"/>
<Button icon="sap-icon://display" type="Transparent" press="onItemPress"/>
</items>
</FlexBox>
</CustomTreeItem>
</Tree>
</l:content>
<l:layoutData>
<l:SplitterLayoutData size="30%"/>
</l:layoutData>
</l:SplitPane>
Then controls disappear:

Answer 1

You can use the SAP UI5 class to achieve this on the control by specifying the class
Depending on your need which is margin or padding you can choose.
sapUiNoContentPadding or sapUiNoMargin
Padding:
https://help.sap.com/saphelp_uiaddon10/helpdata/en/c7/1f6df62dae47ca8284310a6f5fc80a/frameset.htm
Margin:
https://help.sap.com/saphelp_uiaddon10/helpdata/en/77/7168ffe8324873973151dae2356d1c/frameset.htm
you can specify in example below
<l:SplitPane requiredParentWidth="400" demandPane="true" id="default" class="sapUiNoContentPadding ">

Answer 2

Hope this will help you, As per the new version(1.56.8) you need to remove the class sapUiCompFilterBarNonPhone which is adding the padding to the filter bar. Remove the UI5 generated class and add sapUiTinyMargin class to have some margin around the filter bar.
You can achieve using the following code.
var oFilterBar = sap.ui.getCore().byId("YourFilterBarId");//Update your filter Bar ID
if (oFilterBar)
oFilterBar.removeStyleClass("sapUiCompFilterBarNonPhone").addStyleClass("sapUiTinyMargin");