I need to output a listing of activities, which should be grouped by category. Right now I use an unsorted list. Which example you can see here:

Listing Example

The way it is now it looks quite okay, but in each category there could be more than one activity (There could be for example 5 different walks) Where I'm now struggling with is how I create space between the different activities within a group? This is what i have in the page:
Code HTML4Strict:
<div class="content">
 
<cfoutput query="getListing" group="category_name">
<ul class="listing">
<h2><img src="category_icons/#category_icon#" />#category_name#</h2>
<cfoutput>
<li>Name: <span>#activity_name#</span></li>
<li>Title: <span>#activity_title#</span></li>
</cfoutput>
</ul>
</cfoutput>
 
</div>

Sorry for the server side scripting included, but that is also to indicate that the content is created dynamically and could change over night.