Totally stumped here. I've isolated the problem but don't have a clue why it's happening. Here's the CSS (this is for a printed document - that's why I'm using inches):

#printList {

#printList ul {

#printList h4 {

#printList span {

#printList span+span {

Here's the HTML:

<div id="printList">
<h3>Monday, 07/08/2013 - Friday, 07/12/2013</h3>
<h4>Monday, July 8, 2013</h4>
<h4>Tuesday, July 9, 2013</h4>


If you leave the list-style:none in the ul, it wipes out the margins on both the ul and the h4. If you put it in a browser, you can see it visually with the last h4 (Tuesday, July 9, 2013). If you remove the list-style:none, the margins behave the way I wanted them do. My questions are:
  1. What's causing this?
  2. How would I fix it, given that I want both the list-style:none and some space between the bottom of the ul and the top of the next h4?
  3. Even assuming there's an easy fix for my code, is there a better way to accomplish this? (Had I continued the code, there would be separate uls for each date and the user could choose as many dates as they want - maybe even a whole year. I'm not sure the way I have it is the best idea. For example, would this whole thing be better as one long nested list and I could put my h4s in an li with extra padding? Or something else?