The relationship between the inheritance and the units in the CSS row high

Source: Internet
Author: User

We know that row heights can be inherited and there are four of units in the row height.

1 specific pixel values such as: line-height:16px;

2 em

EM refers to the current label settings font size, such as the current label font size is 16px, then 2em = 32px;

3%

% and EM are all based on the font size set by the current label, such as the current label font size is 16px, then line-height:200%; The font size is 32px;

4 no units are taken.

Is the same as%, for example, the current label font size is 16px,line-height:2; the font size is 32px;
Let's take a look at an example of a row high normal inheritance

<! DOCTYPE html>

In the parent element regardless of setting line-height:2;line-height:200%; Or LINE-HEIGHT:2EM, you can find that the line height of the font becomes 40px.

If we give the child element Div also set the font to 25PX, the parent element's row height is 2em or 200%, the row height is still 40px.

. one {
    font-size:20px;
    Line-height:2em;
    /*line-height:200%;*/
}
. two {
    font-size:25px;
}

So the question is, if the row height of our parent element is 2 (without units), then the row height is still 40px.

. one {
    font-size:20px;
    Line-height:2
}
. two {
    font-size:25px;
}

In the browser we can see that the row height turns to 50px.


So we need to pay attention to two points when setting the line height:

1, in the set line height, if the unit is EM or%, then the future row height will be calculated before the results of the successor to the child elements.

2, in the setting line height, if the unit is no unit, then the future row height will inherit to the child elements, and then calculate travel high.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.