Home/ Questions/Q 9253015
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T11:06:32+00:00

I have a div with a known height, in px. In this div, I

  • 0

I have a div with a known height, in px. In this div, I have some text with a known font-size, in px. Now I want to use padding-top to push the text down so it touches the element beneath it. However, it must not extend the div by pushing too far.

How do I calculate the padding? Just subtracting font-size from div-height, causes the div to expand, even if I set line-height:100%. Is there a defined height based on font – is it always the same? Or does it depend on the font-family. I guess it must depend on the font-weight, at least.

(Don’t want to use position:absolute to solve the pushing down problem.)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It varies depending on the font family. Each font has a different baseline. If you set the height of the container to match the height of the font then the font will still hang below the container. This can be centered using line-height, however there will still be some space present above and below the font.

    Here is an article which explains this better.

    http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/

    DEMO:

    Also here is demo I started. You can easily tell where the baseline is and how much extra space there is on top. When line-height is set to equal font-size it centers the font vertically. However, as you can see there is still some white space on top and bottom. So the font itself is not exactly the same height as the container.

    HTML

    <h1>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>
<h1>abcdefghijklmnopqrstuvwxyz</h1>

<h2>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h2>
<h2>abcdefghijklmnopqrstuvwxyz</h2>

<h3>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h3>
<h3>abcdefghijklmnopqrstuvwxyz</h3>

<h4>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h4>
<h4>abcdefghijklmnopqrstuvwxyz</h4>

    CSS

    h1 { 
    font-family:sans-serif;
    font-size:34px;
    height:34px;
    margin-bottom:5px;
    border:1px solid #CCC;
}

h2 { 
    font-family:serif;
    font-size:34px;
    height:34px;
    margin-bottom:5px;
    color:blue;
    border:1px solid #CCC;
    line-height:34px; /*NOTE THIS ONE HAS LINE-HEIGHT*/
}

h3 { 
    font-family:"impact";
    font-size:34px;
    height:34px;
    margin-bottom:5px;
    border:1px solid #CCC;
}

h4 {
    font-family:"Courier New";
    font-size:34px;
    height:34px;
    margin-bottom:5px;
    border:1px solid #CCC;
}

    FIDDLE URL:

    http://jsfiddle.net/KtY4F/9/

    • 0