Lines and vertical-align and cssvertical-align in css

Lines and vertical-align and cssvertical-align in css

Line Element formatting sequence: font-size --> em box --> content area --> line box --> place the line box according to the baseline --> confirm the line box height

Related Concepts:
Leading(Line spacing ):It refers to the lead that is filled between two texts, which is equal to the difference between line-height and font-size. Half leading is added to the top of the text, and the other half leading is added to the bottom of the text, which is only used for non-replacement elements.

EmBox:The em box indicates the distance between the baseline and the boundary between characters. The actual font may be higher or shorter than the em box.

Font-size:Determines the height of the em box in the given font, but it cannot be guaranteed that the actual displayed characters are of this size. The relationship between the font-size attribute and the actual font size is determined by the font designer.

Baseline:The line upon which most letters "sit" and below which descenders extend is not the lower end of the Chinese character, but the lower end of the English letter "x.

Content Area (Content area):A box composed of non-replacement elements, that is, a string of em boxes, is indirectly determined by font-size. A replacement element is the inherent height of the element plus possible margins and boxes.

Line box (Inline box):The virtual Rectangular Box cannot be displayed, and the size is the content area plus leading. For a non-replacement element, it is equal to the line-height value; for a replacement element, it is equal to the height of the content area. Several elements in the same row can have different row height and the row content height.

Line box (Line box):Contains the maximum and minimum boxes of all rows in the row. The height of the row is only related to the Row Height of the element in the row,It has no direct relationship with line-height and has nothing to do with the height of the parent element.. The in-line box is vertically aligned in the row according to its vertical-align attribute value.

Anonymous text:All strings that are not included in the row element.

Line-height:The distance between baselines in this line determines the number of increase or decrease in each element box. The default value is 1.2 times the font size of the element.

When the line-height value is inherited from the parent element, it must inherit the value calculated on the parent element, rather than the value calculated on the child element (em, etc ). If it is a zooming factor (No unit of pure numeric value), It inherits the zooming factor, not the calculated value, and finally calculates the product of the zooming factor and the font-size of the child element.

Figure 1:

Figure 2: lines in css

Figure 3: Determine the Row Height

Replacement element
Replacing the margins and borders of an element affects the row and box height of the element.
Its content is not controlled by the CSS visual formatting model, such as , <input>, <textarea>, <select>, and <object>. Labels act as placeholders, the actual content is not in the document and is called a replacement element. The browser displays these elements based on the tag type and attributes of the elements. For example, the content of an img element is usually replaced by an image specified by its src attribute. Replacement elements usually have their inherent dimensions: an inherent width, an inherent height, and an inherent ratio. For example, a bitmap has an inherent width and height specified by an absolute unit, and thus has an inherent width/height ratio. On the other hand, other documents may not have inherent dimensions, such as a blank html document.
The CSS rendering model does not consider replacing the rendering of element content. The representation of these replacement elements is independent of CSS. Object, video, textarea, and input are also the replacement elements. In some specific situations, audio and canvas are the replacement elements. Objects inserted using the content attribute of CSS are anonymous replacement elements.

Non-replacement element

All other elements except the replacement element are non-replacement elements. The actual content is in the document stream, and the visual formatting model of CSS is responsible for rendering non-replacement elements.
The margin and border of a non-replaceable element do not affect the height of the line and inner frames of the row element.

Vertical-align:Vertical Alignment is only applicable to row elements, replacement elements, and table cells. It cannot be inherited.
The default value is baseline, which alignment the baseline of the element in the row and the baseline of the row. The text is alignment by baseline. If a vertical alignment element has no baseline, an image, form input element, or other replacement elementThe bottom of the element is aligned with the baseline of its parent element..

There is space below that line for the descenders you find onletters like f, j, p and q. solution: Set the vertical-align attribute value of the image or change dislay: block. Alternatively, modify the font-size/line-height of the parent element to make the height of the row box smaller than the image. In extreme cases where the font-size: 0; of the parent element, the midline and baseline will overlap.
Bottom: Align the bottom of the line box with the bottom of the line box.
Middle: A point between the midline of the element box in the row and 0.25em at the top of the baseline. It is also half the distance from the baseline to the lower case letter x (Ex ). The midpoint of the x character is not the absolute midline of the content area, because the x character will sink.
Percentage:Relative to the elementLine-heightComputing. Line-height of line Replaceable elements is used to help calculate vertical-align.
Specific Length Value: increases or decreases the specified distance between an element and its parent baseline. Vertical text does not overwrite the text of other rows, but only affects the Row Height of the current row, so that it is sufficient to include the top and bottom of the highest row and the lowest row.

Intra-row block: inline-blockThe block element in the row is placed in the row as the replacement element, that is, the bottom of the block in the row is placed on the base line of the text line by default. Ie6/ie7 takes effect only when {display: inline; zoom: 1;...} is used. It is usually used for horizontal menu list or non-high list elements to be neatly arranged. The space between the li labels is used as the blank 4px of the inline element on the page. You can use the parent element font-size: 0, and the child element font-size: 12px; to eliminate the blank space. Use word-spacing and letter-spacing to adjust ie6, ie7, and safari.

By default, intra-row blocks are aligned with baseline, but baseline does have special rules. Thebaseline of an 'inline-Block' is the baseline of its last line box in thenormal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visable', in which case the baselineis the bottom margin edge. so the layout shown in the figure appears. You can change vertical-align: top; to fix it.