Aligning the baseline of field labels with the baseline of text in text inputs

Question

I'm displaying text inputs next to some label text in a fieldset. I'd like the baseline of the text in the text inputs to line up with the baseline of the label text. I could set a fudge factor padding-top for my .label elements but the content of my .value elements may contain read-only text and this would screw up the label/value baseline alignment for those fields. I also suspect the different fudge factors would be required for different browsers because of height differences between input fields across browsers.

Does anyone have any ideas how I can get my label and input text baselines to align? My label text may span multiple lines and as such I'd like any solution to take this into account.

You can see a live example the following code at http://jsbin.com/enobe3.

CSS

* {
    font-family: sans-serif;
    font-size: 13px;
}

.field {
    clear: left;
    padding-top: 5px;
}

.label {
    float: left;
    width: 90px;
}

.value {
    margin-left: 90px;
    padding-left: 10px;
}

HTML

<fieldset>
    <div class="field">
        <div class="label">A short label</div>
        <div class="value">Some text</div>
    </div>
    <div class="field">
        <div class="label">A long long long long long long long wrapping label</div>
        <div class="value">Some text</div>
    </div>
    <div class="field">
        <div class="label">A short label</div>
        <div class="value"><input value="Some text"/></div>
    </div>
    <div class="field">
        <div class="label">A long long long long long long long wrapping label</div>
        <div class="value"><input value="Some text"/></div>
    </div>
</fieldset>

Answer 1

The baseline alignment issue is related to the default line height for the text boxes and input field.

input fields have a larger default height to accommodate padding, border and text.

I experimented with your HTML/CSS code snippets and posted my version at http://jsfiddle.net/audetwebdesign/EbuJH/

I added some background colors, some padding and margins to outline the blocks.

The key is to set the line-height property so that your labels and input fields have the same value, 2.0 in my example.

.field {
    clear: left;
    padding: 5px 0;
    background-color: lightgray;
    overflow: auto;
    margin-bottom: 5px;
    line-height: 2.00; /* Key property */
}

You can adjust the line height to get a sense of how it works.

I tested the example in Firefox and IE8 and the results are consistent with a strict doctype.

The result works well for single line labels. The one drawback is that the multi-line labels may have more spacing than you like. You could work around this by putting the first line of the multi-line label in a span and applying the line height only to the span, but that is extra work.

At least we know understand what controls the baseline positioning, so we can make progress.