Creating space between applications on a page

Make sure to back up any file you're going to try changing, of course, because it will be really easy to screw up the appearance of your site while experimenting with this. But as long as you save and restore the original file you should be okay. (If you want to be totally confident that you won't cause problems to the live site and it's feasible you could set up a 2nd "sandbox" or "development" copy of the site to play around with. Your web host might even offer setting up a copy as a (paid) service.)

What you're going to be doing is experimenting with modifying one of the files named «something».css that correspond to the Drupal theme you're currently using. Those files are either going to be under themes/ or sites/all/themes.

Within each of these files is a list of CSS rules. Each rule looks something like

#«something» .«something» {
«attribute1»: «value1»;
«attribute2»: «value2»;
}

Now to change the vertical spacing of the blocks you're probably going to need to add a new CSS attribute like

margin-top: 20px;

...inside the curly braces in one CSS rule within one file. You will need to experiment to find the correct rule to change in the correct file. Once you hit the right one you'd want to change that "20px" number to increase or decrease the gap it creates.

One important note: once you find the right change that makes it look the way you want, make notes on exactly what you had to do. If you upgrade to a new version of Drupal or your theme in the future you may have to re-do the changes.

To further your knowledge of CSS once you get the hang of it, these guys do nice, concise charts of the other CSS attributes available or that kind of information is all over the web too.

Good Luck!