Deep Learning of line-height lines in css, and css line-height lines

Source: Internet
Author: User

Deep Learning of line-height lines in css, and css line-height lines

The previous understanding of the High line-height in css is still somewhat superficial. It is only after deep understanding that it is all-encompassing. Learn the line height, starting from the basic principle

(Mark this article reprinted http://www.cnblogs.com/dolphinX/p/3236686.html this article slightly supplements four kinds of boxes)

Top Line/middle line/basic/bottom line

<! DOCTYPE html> Line Height overview refers to the height of a line of text. Specifically, it refers to the distance between the baselines of two texts.

As shown in the following order:Baseline/midline/baselineThis is similar to the four-line, three-cell book for beginners in English, where vertical-align has attributesTop, middle, baseline, bottomRelated to four lines.

Especially rememberBaselineIt is not the bottom line, but the bottom line isBottom Line.

Row Height/line spacing/semi-row spacing

Row HeightYesContext bankOfVertical Distance between baselines, That is, the vertical distance between the two red lines.

Line spacingYesVertical distance from the bottom line of a line to the top line of the next lineThat is, the vertical distance between the first line and the second line of the Green Line.

Semi-row spacingThat is, the vertical distance of Area 3/2, the distance between area 1, 2, 3, and 4 is the same as the Row Height, while the distance between area 1, 2, and 4 is the same as the font size.Half-line spacingIt can also be calculated as follows:(Row Height-font size)/2

Four box content areas/line boxes/contained boxes

(Note: the latter determines the height of the line is the content area and the line spacing.

1. The content area height is only related to the font-size and font-size.
2. font-size + line spacing = line-height only in simsun font (I .e.)

Content Area(Content area)Bottom line and top line package AreaThat is, the dark gray background area.

Line box(Inline box)EachLine ElementALine box,Line boxIs a concept in a browser rendering model and cannot be displayed,When there are no other factors (such as padding), the line content is equal to the content area,

When the row is set to high, the height of the line inside the box remains unchanged. The half-line spacing [(line height-font size)/2] increases/decreases to the upper and lower sides of the content area (dark blue area)

Line boxLine box ),Line boxIsVirtual Rectangle frameIs a concept in the browser rendering mode and is not actually displayed. The height of the row box is equal to the maximum value of the row box for all elements in the row.

(The line content is aligned to the line content with the highest row value as the benchmark, and the other line content uses its own alignment to align to the benchmark.) when there are multiple lines of content, each row has its own row box.

Contain box ining boxContaining contains the preceding three boxes (as shown in Figure)

<Div>Row Height Unit

Definition: The line-height attribute sets the distance between rows (Row height). Negative values cannot be used. This attribute affects the layout of the row box. When a block-level element is applied, it defines the minimum distance between the basic line of the element, rather than the maximum distance. The difference between the calculated line-height and font-size values (line spacing) is divided into two halves, respectively added to the top and bottom of a text line content. The smallest box that can contain the content is the row box.

Value Description
Normal By default, reasonable row spacing is set.
Number Set a number, which corresponds to the current font sizeMultiplyTo set the line spacing. Equal to multiple
Length Set a fixed line spacing.
% The row spacing is based on the percentage of the current font size.
Inherit Specifies that the value of the line-height attribute should be inherited from the parent element.

Row Height properties brief overview for now more details http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html

Vertical center of Single Line Text

<Div>Vertical center of multi-line text

<Div>Influence of the inside-row box on the Row Height

The row height is the highest row height. The line height is adjusted by line-height. The Row height of the content area is related to the font size. padding does not affect the Row height.

<Div>Inheritance percentage of high rows

The row height can be inherited, but it is not a simple copy of the parent element. The Row Height inherits the calculated value.

<! DOCTYPE html> 

[Reference]

Source http://www.cnblogs.com/dolphinX/p/3236686.html

Http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html

Http://www.zhangxinxu.com/wordpress/2009/11/csshigh line-heightsome in-depth application/

Http://www.imooc.com/learn/403

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.