Simple code <div> question to seperate banners

Coding is not something I really get into, but have a problem centering 2 120x240 banners in a 250x250 widget

Here is the code I used:
<div align="center">
code for banner one
code for banner two
</div>

Which worked fine for centering the two 120 width banners side by side in the 250 width slot

What I want to do is add a small amount of white space between the banner to make it look better (perhaps 5 pixels).

What code can I had between the banners to do this?

 

Probably easier to give each banner it's own div inside the widget so you can style it with css:

#banner1, #banner2 {
  display:inline-block;
  width:120px;
  height:240px;
  background:#006699;

Code (CSS):

HTML like so:

  <div id="banner1">Banner Code1</div>
  <div id="banner2">Banner Code2</div>

HTML:

Heres a fiddle for you: http://jsfiddle.net/7v3heud6/
I only gave the banner div's a background color so you can see them, you won't need to use that bit.

 

Or do something I wouldn't recommend to anyone but it's easy, just put element with width of 5 px between banners.