How to achieve proper CSS line-height consistency


Tags: css

Problem :

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 <em> or a <strong> (or even some <code> which uses a different font-size than the <body>), 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 consistent line-height. If anyone has any ideas, I'd certainly love to hear them.

Edit 3:

For my own future reference and from my own research, these tags should be considered with line-height: 1 as long as they are displayed inline along with other standard body text:

abbr, acronym, b, big, cite, code, del, dfn, em, i, ins, kbd, q,
samp, small, strong, sub, sup, tt, var

These elements are questionable:

a, bdo, img, span


Solution :

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;
}

    CSS Howto..

    How do three.js transforms and CSS3 3D-transforms correspond?

    How do I differentiate between IE versions 6 to 10 using IE CSS Hacks?

    div shown with jquery is cropped

    how to change a css background onclick

    How is physical inch related to pixels in css given so many different resolutions?

    CSS How to embed several Font-Weights at once

    bootstrap css, how to make full width div inside container

    How to spread three columns in CSS across a page equally

    how to convert inline CSS into external CSS?

    How to correctly align left in CSS?

    How to make the Div fixed at a particular scroll location?

    How do I show annotations on my Google Chart that extracts data from a Google Spreadsheet?

    How to move “+” to right i n css?

    CSS: How to select first element in each row?

    How would you code this: The SO Menu [closed]

    I'm making a chatbox. I have a div and input field inside of a div. I want them to resize in a particular way. How do I do this, preferably with css?

    How to display “Classic” fractions in CSS / Javascript

    How to disable the 'save image as' popup for smartphones for

    How to style Bootstrap menu like a V? [closed]

    JQuery show delete button on appended div

    How is box-shadow returned in IE9?

    How to apply css styles in embed widget

    popup mask is very very quickly shown

    I can't figure out how to get display property to work when it comes to multiple div elements

    How can I make list item spacing more acceptable in html/css email for all viewers?

    How to align a

    into

    or when content it is dynamic?

    How to switch between tabs using href?

    How to create a sub folder on Page?

    How to apply an opacity without affecting a child element with html/css?

    How to fit a div container to cover all the remaining space in between?