CODEWITHSUNDEEP
htmlcssfont-size
Iiridayn
Iiridayn

Reputation: 1821

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>

Upvotes: 0

Views: 1917

Answers (3)

Mark
Mark

Reputation: 5720

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

Upvotes: 1

Ortiga
Ortiga

Reputation: 8814

position: relative;
bottom: 1.3em; /* same as line height */


body { 
    line-height: 1.3em; 
    font-size: 75%; 
} 
dd { 
    position:relative; 
    bottom: 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>

See fiddle

Upvotes: 0

Alexey Lebedev
Alexey Lebedev

Reputation: 12197

<ol> seems to be a better fit in this case, but you can do something like this:

dl {
    font: 200%/1.3 Arial;
    overflow: hidden;
}

dt {
    clear: both;
}

dt, dd {
   float: left;
   margin-left: 0.5em;
}
<dl><dt>1</dt><dd>One</dd><dt>2</dt><dd>Two</dd><dt>3</dt><dd>Three</dd></dl>
​ http://jsfiddle.net/MgBvV/1/

Upvotes: 1

Related Questions