How to add small separator between buttons in custom ribbon(Ribbon X:XML) ?

[ajay1111]

Hello everyone,
I wanted a small separator to appear between buttons in custom ribbon tab. But the "<separator id="MySeparatorE1" />" always draws large vertical separator.
How can we get small separator as circled in picture to appear between the buttons ?

</group>
            <group id="customgroupF" label="EDIT SECTION">
               <dropDown id="dropDownF1" label="Hello:" sizeString="B_300*300" getItemCount="GetItemCount1" getItemLabel="GetItemLabel1" onAction="onaction1" getSelectedItemIndex="ItemSelectedIndex1" />
               <dropDown id="dropDownF2" label="Hi:" sizeString="C_300*300" getItemCount="GetItemCount2" getItemLabel="GetItemLabel2" onAction="onaction2" getSelectedItemIndex="ItemSelectedIndex2" />
                   <box id="box1" boxStyle="horizontal">
                  <button id="custombuttonF3" label="Sample1" screentip="Increase" onAction="Macro4" imageMso="UpArrow2" />
                  <button id="custombuttonF4" label="Sample2" screentip="Decrease" onAction="Macro4" imageMso="DownArrow2" />
                  </box>
               <box id="box2" boxStyle="vertical">
                  <button id="custombuttonF1" label="Run1" showLabel="false" screentip="Edit1" onAction="Macro4" imageMso="MacroPlay" />
                  <button id="custombuttonF2" label="Run2" showLabel="false" screentip="Edit2" onAction="Macro4" imageMso="MacroPlay" />
               </box>
            </group>