[SOLVED] Move an HTML element up exactly 1 line-height

Move an HTML element up exactly 1 line-height

I have some markup:

<dl><dt>1</dt><dd>One</dd><dt>2</dt><dd>Two</dd><dt>3</dt><dd>Three</dd></dl>

Which I would like to style such that the <dd>s are in-line with the <dt>s. My document's line-height is set to 1.3. Knowing that ems are equal to the font-size and that line-height is a percentage of the font-size, I tried:

body { line-height: 1.3; font-size: 75%; }
dd { margin-top: -1.3em; margin-left: 10em; }

Giving the <dt>s a reasonable spacing for my data. This did not work, as in pixels the line-height measured 15px but 1.3em measures 15.6px. According to http://www.brunildo.org/test/line-height-approx.html, different browsers compute the exact pixel value of a line-height differently - I was developing in Chrome, and was lucky to be caught by it.

For the purposes of this question I would like to avoid pixels - specifying line-height, and margin-top in pixels would work, but would resize poorly.

Here is a snippet which shows the problem:

body { line-height: 1.3; font-size: 125%; }
dd { margin-top: -1.3em; margin-left: 1em; }

<dl>
  <dt>1</dt><dd>One</dd>
  <dt>2</dt><dd>Two</dd>
  <dt>3</dt><dd>Three</dd>
</dl>

Solution

From my understanding of what you want to achieve, you want each dt/dd pair on the same line?

Here is a working jsfiddle example: http://jsfiddle.net/w9YQx/1/

Use floats, and clear. line-height, font-size etc is irrelevant.

dt {
    float: left;
    width: 150px;
    clear: left;
    text-align: right;
}
dd {
    margin-left: 10px;
}

<dl>
<dt>Hello</dt>
<dd>My Name Is</dd>
<dt>Bye</dt>
<dd>My Name Was</dd>
</dl>

You can set the widths to whatever you want, this is just an example