Question

I am having problem aligning text vertically at the top of the span.

vertical-align: top; text-top etc…do not work and it is span which is display: inline-block.

Please have a look at the code and a snapshot of the output.

The output looks more like center aligned and not top aligned.

Would be greatful if someone could help.

<span id="myspan" contenteditable="true" style="font-size:30px;" 
                                                        class="textImage" >
     This is text inside the span
</span>
<button id="mybutton" type="button">Increase Font</button>

css:

  .textImage
{
    border: solid 4px #000000;
    min-height: 20px;
    min-width: 240px;
    display: inline-block;
    font-family: Arial;
    color: red;
    vertical-align: text-top;
}​

Javascript:

$("#mybutton").click(function(event) {
    document.getElementById("myspan").style.fontSize = 
                  (parseInt(document.getElementById("myspan").style.fontSize, 10)
                                                    + parseInt(4, 10)) + 'px';
});​

Answer 1

Most fonts take up more height for each character than that visibly taken by say the character T. You’ll be able to see this clearly if you select some text. The height of the selection should give you an idea about the actual height of each character in the font you’ve used. If the selection highlight is seen as touching the inside top of your span, that means the text is indeed top aligned. If you notice any gap between the top of the selection and the inner top of your span, you should be able to correct that by removing any padding-top given to the span.