Question

In the following HTML/CSS example

http://jsfiddle.net/Hmwvv/

we can notice a leading space with size proportional to font’s size. How can I remove this effect in order to have different sized texts in different div elements aligned ?

Answer 1

There is a small amount of white space around each glyph, this is intentional so that the letters don’t overlap. You can see this by selecting one letter.

To solve your problem, introduce a small negative text-indent.

#big {
    text-indent: -5px;
}

Demo