Aligning fonts in label - html

Question

Is there any way to alter the text property inside label so that it touches the baseline? In the example, both State and City are above the baseline.
http://jsfiddle.net/6VzLR/
HTML:
<div id="leftContent">
<div id="state">
<label for="state">State:</label>
<select name="state">
<option>State - Karnataka</option>
</select>
</div>
<div id="city">
<label for="city">City:</label>
<select name="city">
<option>City - Bangalore</option>
</select>
</div>
</div><!--leftContent-->
CSS:
#state label, #city label{
width:40%;
display:inline-block;
margin: 3px 0 3px 6px;
}

Answer 1

If you specify a height for the label you can use line-height to adjust where the text will be:
#state label, #city label{
width:40%;
display:inline-block;
border:1px solid #000000;
margin: 3px 0 3px 6px;
line-height: 28px;
height: 20px;
vertical-align: bottom;
}
Here's the JSFiddle.
EDIT: You can add
#state select, #city select {
margin-bottom: 4px;
}
So the select boxes are positioned the same as well.
Here's the updated JSFiddle.

Answer 2

The order of margins in CSS margin property is top-right-bottom-left.
So it looks like you are setting 0px for right margin, not for bottom one.
Try this:
margin: 3px 3px 0px 6px;
Or:
margin-bottom: 0px;
I would persionally better explore padding css option though.

Answer 3

I applied the following CSS to your HTML snippet:
label, select {
font-family: arial;
font-size: 2.0em;
vertical-align: baseline; /* default value */
}
label {
border: 1px solid gray;
width:40%;
display:inline-block;
margin: 3px 0 3px 6px;
text-align: right;
}
and got the following result: http://jsfiddle.net/audetwebdesign/3CQbq/
The text in the label and the select elements align along a common baseline, which is more obvious if you increase the font size.
However, you need to make sure that the same font family and font size are used in both the label and the select fields to get the same alignment. (In your example, this does not seem to be an issue even though the fonts differ.)
In your example, the text align along the same baseline and the bottom of the two boxes also align along a common horizontal line.
However, the box around the label is taller than the box for the select group, so that may be what you are trying to fix.