I don't know the line high--line-height

Overview

• For block-level elements, the CSS property line-height specifies the minimum height of the line-boxes inside the element.
• For non-substituted inline elements, the line-height is used to calculate the height of the line box.
• Line-height does not affect the substitution of inline elements, such as button or other input elements

Take value

• normal
  Depends on the user agent. Desktop browsers (including Mozilla Firefox) use the default value, which is approximately 1.2, depending on the font-family of the element. (Differences exist)
• <number>
  The value used is a font size that has no unit value multiplied by the element. The calculated values are the same as those specified with numeric values. In most cases, using this method to set Line-height is the preferred method, and there will be no exception value in the case of inheritance.
• <length>
  Specifies the height to use to calculate the line box. See get possible units.
• <percentage>
  is related to the font size of the element itself. The calculated value is the given percent value multiplied by the font size calculated by the element.
• inherit

Abbreviation: The value of Line-height immediately follows the value of font-size, using/separating (eg:font:16px/normal Arial;)

Calculation

• percent  
  all inherited elements ignore their own font-size, while using the same, calculated line-height;line-height does not scale proportionally with the associated font-size. may lead to some places too tight, and some places too loose (disadvantage).

  element	font-size	line-height	calculated Line-heig HT
  body	16px	120%	16px * 120% = 19.2px
  H1	32px	inherited computed value	19.2px
  p	16px	inherited computed value	19.2px
  footer	12 PX	inherited computed value	19.2px

• The

• length is  
  all inherited elements ignore their font-size and use the same inherited line-height, and do not scale proportionally with the associated font-size.

  /tr>

  element	font-size	line-height	calculated Line-heig HT
  body	16px	20px	20px
  H1	32px	inherited computed value	20px
  p	16px	inherited computed value	20px
  footer	12px	inherited count Calculated value	20px

• Normal (approximately 1.2)  
  All inherited elements does not ignore its own font-size, using line-height based on font-size calculation; It does not scale proportionally with the relevant font-size. Scaling is now

  element	font-size	line-height	calculated L Ine-height
  body	16px	normal	16px * 1.2 (approx) = 19.2px
  H1	32px	normal	32px * 1.2 (approx) = 38.4p X
  p	16px	normal	16px * 1.2 (approx) = 19.2px
  footer	12px	normal	11.2px * 1.2 (approx) = 13.44px

• Pure numerals (recommended)
  All inherited elements use line-height based on font-size, and are scaled accordingly with the font-size. (occasionally the title will be relatively loose in some places)

  element	font-size	Line-height	line-height after the calculation
  Body	16px	1.5	16PX * 1.5 = 24px
  H1	32px	Factor: 1.5	32PX * 1.5 = 48px
  P	16px	Factor: 1.5	16PX * 1.5 = 24px
  Footer	12px	Factor: 1.5	12px * 1.5 = 18px

  * Content settings can be considered line-height:1.5; Heading settings 1.2

Four kinds of boxes

Containing box
Inline boxes
Line boxes (inline boxes in containing boxes one after another to form line boxes, high depending on the internal highest inline box)
Content area (around text, invisible box, high depending on font-size)
* Four kinds of boxes the problem is never too clear

Reference: http://www.slideshare.net/daemao/line-height-2470819

Application

• Single-line Text center
  Generally in the single-line text center is the use of this strategy-the line-height set and height, etc., but height is not required to set
• Center multi-line text with fixed height
• Vertical center of picture

I don't know the line high--line-height