I have the following fiddle:
http://jsfiddle.net/tompazourek/sn5jp/
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>
p { line-height: 20px }
When I inspect the page in Chrome, I find out that the computed height of the first paragraph is 20px, but the computed height of the second paragraph is 21px.
Why is the <small>
tag causing these problems? How can I fix this?
Every occurence of <small>
in the paragraph text messes up my baseline grid.
EDIT: I later also found an interesting article relevant to this topic: Deep dive CSS: font metrics, line-height and vertical-align.
Explanation:
There are a few things happening here.
In your example, the small
element is an inline-level element, which means that its vertical alignment is determined by the vertical-align
property.
The default vertical-align
value is baseline
, which means that the baseline of the small
element will be aligned to the baseline of the parent box:
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
Next, you need to consider the line-height
property and how it is calculated. You also need to take leading and half-leading into account. In CSS, half-leading is determined by finding the difference between the element's line-height
and font-size
, dividing that in half, and then placing the calculated amount of space above and below the text.
For illustration, here is an example image demonstrating this (taken from W3.org):
Since the line-height
is 20px
, and the small
element has a font-size
of 13px
, then we can determine that 3.5px
of space is added above and below the small
element's text:
(20px - 13px) / 2 = 3.5px
Likewise, if we calculate the half-leading of the surronding text nodes, which have a font-size
of 16px
, then we can determine that 2px
of space is added above and below the surrounding text.
(20px - 16px) / 2 = 2px
Now if we relate these half-leading space calculations back to the vertical-align
property, you will notice that more space is actually being added below the baseline of the small
element. This explains why the computed height of the p
element containing the small
element was larger than the computed height of the other p
element.
With that being said, you would expect the computed height of the p
element to continue increasing as the font-size
of the small
element decreases. To further illustrate this point, you will notice that the computed height of the p
element is 23px
when the font-size
of the small
element is set to 6px
.
p { line-height: 20px; }
small { font-size: 6px; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>
Potential Workarounds:
Since we know that the height difference results from the extra space that is added to the baseline
, we could change the vertical-align
value of the small
element to top
:
p { line-height: 20px; }
small { vertical-align: top; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>
Alternatively, you could give the small
element a line-height
of 17px
, which would result in 2px
of space being added above and below the element (which is the same amount of space that is added for the surrounding text like we calculated above).
// Surrounding text that is 16px:
(20px - 16px) / 2 = 2px
// Small element text that is 13px:
(17px - 13px) / 2 = 2px
p { line-height: 20px; }
small { line-height: 17px; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>
However, you really don't want to be calculating any of that and hardcoding it, which means that you should just use a relative line-height
and omit the px
units.
Since the the font-size
is 16px
and the desired line-height
value is 20px
, you would divide the line-height
by the font-size
and get 1.25
:
p { line-height: 1.25; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>
If you don't want to use a relative line-height: 1.25
, and you want to continue using line-height: 20px
, then you could of course reset the small
element's line-height
value back to the initial value, which is normal
.
p { line-height: 20px; }
small { line-height: normal; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>
The alternative to the answers posted by Josh Crozier would be to reset small line-height alltogether:
p { line-height: 20px }
small {line-height: initial;}
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>
You can use a relative value for line-height
. In your case, the base font size is 16px, so a 20px line height in relative units would be 1.25
p { line-height: 1.25; }
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>
This happen because of small tag has font-size:smaller and p tag has bigger size then small tag so this difference of small and p tag making this problem. When you are putting small tag into p tag then increase height because small tag taking small space then p tag.
Soving this problem you have to give line height to small tag 19px, like this:
p { line-height: 20px }
small{line-height: 19px}
<p>some normal-sized text</p>
<p>some <small>small</small>-sized text</p>