How to achieve proper CSS line-height consistency

Question

My basic CSS rule for `font-size` and `line-height` is pretty simple: ``` body { font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; } ``` When I create a paragraph that contains an `` or a `` (or even some `` which uses a different `font-size` than the ``), I notice that these elements increase the line-height by a pixel or two. This leads me to believe that most browsers take the largest inline element to display `line-height`. Is that right? My goal is to make the `line-height` consistent, regardless of which elements are inline. The only way I've found to make the `line-height` consistent is to define: ``` em, strong, code, etc { line-height: 100%; } ``` Is this the right way to go about this? Or am I being too much of a perfectionist? Edit 1: This also seems to work: ``` em, strong, code, etc { line-height: 1; } ``` Edit 2: After playing with this for a few days, it doesn't appear that there is a reliable solution for keeping a c…

Accepted Answer

The spec confirms what you thought, that browsers take the largest font for the line-height calculation. That means your only option (and the one the spec mentions) is to set the line height for ALL the inline boxes on lines you care about. You probably would not be happy with the results of selecting `body *` and setting the font size. So add some Divs with the same class around whatever blocks of text you want to look uniform, and there you go:

```
div.uniformlines * { 
    line-height: 100%;
    font-size: 16px;
}
```

How to achieve proper CSS line-height consistency

Solution

Problem