CSS article - line-height calculation method (parent and child elements)-CSS Tutorial-php.cn

CSS article - line-height calculation method (parent and child elements)

高洛峰

Release： 2017-02-13 14:14:55

Original

2354 people have browsed it

Here are just a few situations that I personally think are easily ambiguous.
html structure is as follows:

<p>
     </p><p>
        测试行高
    </p>

Copy after login

The parent element is a number and the child element is not set

.parent{
     font-size: 12px;
     ine-height: 1;
 }
.child{
    font-size: 16px;
 }

Copy after login

The parent element parent is CSS article - line-height calculation method (parent and child elements)
The child element child is
Indicates that the child element inherits the numeric value of the parent element's display setting, which is related to the parent element's own font-size

Percentage of the parent element, the child element is not set

.parent{
    font-size: 12px;
    line-height: 100%;
}
.child{
    font-size: 16px;
}

Copy after login

The parent element's parent is CSS article - line-height calculation method (parent and child elements)
The child element child is
indicating that the child element inherits the row height of the parent element calculated based on the percentage, and has nothing to do with the font-size of the parent element itself

Relevant

For 1 , case 2, add line-height: inherit to the child element child, derived cases 3 and 4, the performance remains unchanged

Here are just a few. A situation that I personally think is easily ambiguous.
html structure is as follows:

<p>
     </p><p>
        测试行高
    </p>

Copy after login

The parent element is a number and the child element is not set

.parent{
     font-size: 12px;
     ine-height: 1;
 }
.child{
    font-size: 16px;
 }

Copy after login

Percentage of the parent element, the child element is not set

.parent{
    font-size: 12px;
    line-height: 100%;
}
.child{
    font-size: 16px;
}

Copy after login

The parent element's parent is CSS article - line-height calculation method (parent and child elements)
The child element child is
, indicating that the child element inherits the line height of the parent element calculated based on the percentage, and has nothing to do with the font-size of the parent element itself

More CSS articles-line-height calculation For articles related to methods (parent-child elements), please pay attention to the PHP Chinese website!