Need CSS property to get checkboxes vertically closer to each other

I have the following CSS rule for the HTML code below

CSS.

.tercero {
    margin-top:1em;
    width:200px;
    height:240px;
    float:right;
    margin-right:1.5em;
    display:inline;
}

.abajo .primero .tercero ol {
    padding: 0.8em 0em 0 1em;
    list-style: none;
    width:100px;
    border-color:#FFFFFF;
font-size:13px;
}

.abajo .primero .tercero ol li {
   margin:0px;
   line-height:0em;
}

.abajo .primero .tercero ol li input{
margin-right:2px;
margin-top:0px;
margin:0;
}




.abajo .primero .tercero .checkboxes23 {
left:4px;
margin:0;
padding:0;

	
	}

Code (markup):

HTML

   <fieldset class="tercero" style="" >
				<legend>Services</legend>
    <ol> <li class="restaurants-offerings-4">
    <input type="checkbox" name="frmSearch[offerings][]" value="4" id="restaurants-offerings-4">
     <span for="restaurants-offerings-4" class="checkboxes23">Buffet</span>

     </li>
<li class="restaurants-offerings-7">
     <input type="checkbox" name="frmSearch[offerings][]" value="7" id="restaurants-offerings-7">
     <span for="restaurants-offerings-7" class="checkboxes23">Catering</span>
      </li>
<li class="restaurants-offerings-1">
   <input type="checkbox" name="frmSearch[offerings][]" value="1" id="restaurants-offerings-1">
   <span for="restaurants-offerings-1" class="checkboxes23">Delivery</span>
   </li>
<li class="restaurants-offerings-2">
  <input type="checkbox" name="frmSearch[offerings][]" value="2" id="restaurants-offerings-2">

  <span for="restaurants-offerings-2" class="checkboxes23">Eat-in</span>
   </li>
<li class="restaurants-offerings-6">
   <input type="checkbox" name="frmSearch[offerings][]" value="6" id="restaurants-offerings-6">
   <span for="restaurants-offerings-6" class="checkboxes23">Parking</span>
    </li>
<li class="restaurants-offerings-5">
 <input type="checkbox" name="frmSearch[offerings][]" value="5" id="restaurants-offerings-5">
   <span for="restaurants-offerings-5" class="checkboxes23">TV</span>

 </li>
<li class="restaurants-offerings-8">
  <input type="checkbox" name="frmSearch[offerings][]" value="8" id="restaurants-offerings-8">
 <span for="restaurants-offerings-8" class="checkboxes23">Takeout</span>
    </li>
<li class="restaurants-offerings-3">
   <input type="checkbox" name="frmSearch[offerings][]" value="3" id="restaurants-offerings-3">
    <span for="restaurants-offerings-3" class="checkboxes23">Wi-Fi</span>
     </li>               
            
            </ol></fieldset>

Code (markup):

The thing here is that the <li></li> tags display the checkboxes kind of apart from each other in compared to the Service field in www.nyhungry.com
that list the Services and CSS the check boxes close to eachother without a big line-height in between.

Thank you.

 

I did not visually see a difference using the code you posted here. However I will note that you set a line-height for the list [<li></li>] but that website did not.

Suspect Code:

.abajo .primero .tercero ol li {
   margin:0px;
   [B]line-height:0em;[/B]
}

Code (markup):