Detailed introduction about lineheight

1. The definition of line height. Line height refers to the distance between lines, that is, the distance between baselines. Only two lines of text will have two baselines. So why does a single line of text still have a line height? We look down with this question in mind. 2. Inline box model

This is a single line of text, and there is a content area tag.

Figure 1 The "content area" is a box surrounding the text. We can think of it as the size of the text area selected by the mouse. Its size is only related to font-size. It can be seen as Figure 1 The area where the text in is selected by the mouse is the area where "a single line of text" is selected. "Inline boxes" do not display text in blocks, but in a row. Text wrapped by inline elements, such as the "content area" wrapped by span tags, can be called an "inline box", while the part not wrapped by inline elements can be regarded as an "anonymous inline box". The "inline box" can be seen as the "content area" area within the span tag in Figure 1, and the "anonymous inline box" can be seen as the red virtual box

1. Must master css attribute --lineheight

##Introduction: 1. Definition of line height Line height refers to the distance between lines Distance, that is, the distance between baselines, and only two lines of text will have two baselines, so why does a single line of text still have a line height? We look down with this question in mind. 2. Inline box model This is a single line of text, and there is a content area label. The "content area" is the box surrounding the text. We can think of it as the size of the text area selected by the mouse. Its size is only related to the fontsize. It can be thought of as the area where the text in Figure 1 is selected by the mouse. That is...

2. Share a way to make the font size larger and uncentered in the sequence

Introduction: Scenario: Click on a letter to pop up a modal, and display the letter in the modal. style:.modal{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: 600rpx 300rpx 0 300rpx; height: 140rpx; borderradius: 10rpx; lineheight:...

[Related Q&A recommendations]:

javascript - A strange problem in calculating DOM attributes (getComputedStyle)

The above is the detailed content of Detailed introduction about lineheight. For more information, please follow other related articles on the PHP Chinese website!