Need CSS property to get checkboxes vertically closer to each other

[co.ador]

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;


}

 

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>[/left]

 

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.

[haku]

Three things:

 

1) The link you gave doesn't work.

2) You can move the li tags closer by giving them smaller top/bottom margins. Start with this and work outwards:

 

li
{
  margin-top:0;
  margin-bottom:0;
}

 

3) All your class names seem to be unique names. If this is the case, then you should use IDs for this, not classes. Classes are used for targeting multiple elements with the same classname. IDs are used for targeting individual elements, and IDs must be unique. It will still work the way you are doing it, but it's not good practice.

[co.ador]

I got it, I knew there was a difference in between classes and id's but is not until your explanation in the former post when I came to really understand it.

 

thank! I will try to assign id's since each one has a unique value.

 

the correct link is

 

www.nyhungry.com