Here is how I defined Headings in my Style sheet:


The border property is a temporary measure, purely for my own benefit, so that I can see what is going on ... and I cannot understand what is going on???

Each box was a different size (width), even though width was set at 52% for each of them (I thought that would be 52% of the width of the parent container). As the font got smaller, from H1 to H4, so too did the length of the box. The other thing I noticed was that the padding to the left was different for each box - the lines of text did not line up on their left hand side, but were indented to differing degrees. This made me think that perhaps the width attribute might be a function of the font-size.

However, when I substituted 10px for the 3em in the above definitions, and refreshed my screen, suddenly all boxes were of identical length, and all lines were in perfect register ie lined up on their left hand sides.

Why is this so?

Many thanks, James

The width of the content is 52% of the width of the parent element. The padding, border, and margin are in addition to that 52% width.

So the borders are 52% + 3em wide, and 3em is bigger for h1 than it is for h4, because the font size is bigger for h1 than it is for h4.

Thanks Darin - got it now! There is always a logical answer.

James