How to control spacings between elements

Hello!

I still don’t get how to control the spaces between elements of certain shortcodes. Sometimes I can only manage to obtain spaces which are either too big or too small. I’ve set up a page to illustrate this. See here. It displays a button followed by a spoiler with different formattings in the editor. Here is the code of the page:

[su_button wide="yes"]Button text[/su_button][su_spoiler style="fancy"]Hidden content[/su_spoiler]

<hr>

[su_button wide="yes"]Button text[/su_button]
[su_spoiler style="fancy"]Hidden content[/su_spoiler]

<hr>

[su_button wide="yes"]Button text[/su_button]

[su_spoiler style="fancy"]Hidden content[/su_spoiler]

<hr>

[su_button wide="yes"]Button text[/su_button]
&nbsp;
[su_spoiler style="fancy"]Hidden content[/su_spoiler]

<hr>

[su_button wide="yes"]Button text[/su_button]
&nbsp;

[su_spoiler style="fancy"]Hidden content[/su_spoiler]

<hr>

[su_button wide="yes"]Button text[/su_button]

&nbsp;
[su_spoiler style="fancy"]Hidden content[/su_spoiler]

<hr>

[su_button wide="yes"]Button text[/su_button]

&nbsp;

[su_spoiler style="fancy"]Hidden content[/su_spoiler]

On top of that, the layout seems also to be influenced by other shortcode elements somewhere on the page, not only by the local formatting around the shortcodes in the editor.
Using “custom formatting” in the settings, yout get different layout, yes. But I don’t want to use it, because it changes the layout of other stuff on my page. Also, I dont’t need it for row or column, they also work with “custom formatting” disabled.

http://wordpress.org/plugins/shortcodes-ultimate/