<style>
p {
text-indent: 2em; /*2*66px*/
font-size: 16px;
}
.div {
font-size: 66px;
}
</style>
<div class="div">
</div>Why is the indentation 16px 2 instead of 66px 2?
em refers to the font size of the parent element, that is, 66px.
first of all, we need to make it clear that font-size,line-height,text-indent is an inheritable css property, and then we will discuss the use of these three attributes and their inheritance methods. They look simple, but in fact they are easy to be confused in usage.
1. Font-size (font size)
1.px
use pixels directly to specify a specific font size to use, such as p {font-size:18px;}.
2.em or percentage
em is used to set the font size relative to the parent element, and the value of em = the font size to be specified / the font size of the parent element. For example, we want to set the font size of the p element to 18px, and the font size of its parent element to 16px, because the 18max is 16x 1.125, so set p {font-size:1.125}. In my opinion, using em is the best way to set font size, because it has more flexibility relative to units and is beneficial to responsive Web design and development. The usage of percentage is similar to that of em, except that em is more commonly used.
finally, px will not say much about the inheritance of these three methods, that is, inherit the size of px. As for the use of em and percentage p%, their child elements do not inherit the value of the relative unit, but the calculated value.
II. Line-height (row height)
1.px (not much)
2. The non-unit number n (most frequently used)
line-height is the font size of the element and the numeric value multiplied by n. If p {font-size:16px; line-height:1.5;}, then the row height of the p element is 24px. Using this method, the child element inherits the factor n of the parent element, not the calculated size. The relative unit em, percentage of
3.em or percentage
line-height is used differently from font-size, and the relative unit of line-height is relative to the font size of the current element, not to its parent element. For example, if the font size of the p element is 20pxline line height is 1em, and the font size of the parent element is 16px, then the line-height of the p element is equal to 20px instead of 16px. However, inheritance is the same as font-size, both inheriting the size, that is, the resulting row height, rather than the value of the relative unit.
III. Text-indent (text indentation)
1.px (not much to say)
2.em
like line-height, it inherits the generated size based on the font size of the current element. The first line of a general paragraph is indented with 2em.
3. Percentage p%
the percentage of text-indent is used in a unique way. It is neither calculated for the font size of the parent element nor relative to the font size of the current element, it is calculated relative to the width of the parent element. For example, if the width of the parent element is 300px, then 10% of the text-indent of its child elements is 30px. This is also the inherited size, not the value of the relative unit.
em is based on the font size of the current element. The premise of
em relative to the font size of the parent element is that your current element does not set the font size and will inherit the font size of the parent element.
em
the em of the child element font size is relative to the width/height/padding/margin of the parent element
element. If you use em, it is relative to the font-size,text-indent of that element.
Line spacing = line-height minus font-size, its height is 1em
quote "Zhang Xinxu css World"
line-height: ???; do not want to set a fixed px, because it will change, how to set it to follow the element height 100%? ...