Question

I have this HTML/CSS code (JSBin):

.trackTime{width:50px; text-align:left; float:left;}
.trackInputTime{width:45px; height:22px; background-color:#F4F4F4;}   

<span class="trackTime">            
    <select name="hours[]" class="trackInputTime" id="trackInputHours" >
        <option value="??">??</option>
     </select>
</span>

<span class="trackTime">            
    <select name="minuts[]" class="trackInputTime" >
        <option value="??">??</option>
    </select>   
</span>

<span class="trackTime">                            
    <select name="seconds[]" class="trackInputTime" >
        <option value="??">??</option>
    </select>
</span>

And I’d like to remove the span for each select field. Tried to remove the span and edit the class (here the edited version) :

.trackInputTime{width:50px; height:22px; background-color:#F4F4F4; text-align:left; padding-right:5px; float:left;}

but there is a white background that I don’t like..

The same for an input submit button :

.trackBotton{width:75px; float:left; text-align:right;}

<span class="trackBotton"><input type="submit" value="+ Side" onClick="addSide(this);return false" /></span>
<span class="trackBotton"><input type="submit" value="+ Track" onClick="addTrack(this);return false" /></span>
<span class="trackBotton"><input type="submit" value="Remove" onClick="remTrack(this);return false" /></span>

I have many of these span, that’s why I’d like to remove them.

How can I do it? Can’t add the jsfiddle because seems to be offline :O

Answer 1

Looks like you use the spans to get some space between the form elements.
You can remove the spans and use

.trackInputTime{width:50px; height:22px; background-color:#F4F4F4; text-align:left; margin-right:5px; float:left;}

You were almost there, just use “margin” instead of “padding”. Padding is extra space on the “inside” of the element, margin on the outside.