Detailed Explanation of the line-height Property in CSS

Knowledge Point Description
The line-height property in CSS is used to control the line height of text. It affects the height of line boxes and the vertical alignment of text. Understanding line-height is crucial for precisely controlling text layout, achieving vertical centering, and managing spacing in multiline text.

Basic Concepts

1. line-height defines the minimum height of a line box, which is the vertical spacing between lines of text.
2. The default value is typically 'normal' (approximately 1.2, depending on the font and browser).
3. It can accept different types of values such as numbers, length values, and percentages.

Property Value Types

1. Number (e.g., 1.5): Calculated relative to the current element's font size.
2. Length Value (e.g., 20px, 1.5em): A fixed, specific value.
3. Percentage (e.g., 150%): Calculated relative to the current element's font size.
4. normal: Uses the browser's default line height (usually 1.0-1.2).

Calculation Methods for Line Height

/* Example 1: Number type */
.element {
  font-size: 16px;
  line-height: 1.5; /* Actual line height = 16px × 1.5 = 24px */
}

/* Example 2: Length value type */
.element {
  font-size: 16px;
  line-height: 24px; /* Fixed line height of 24px */
}

/* Example 3: Percentage type */
.element {
  font-size: 16px;
  line-height: 150%; /* Actual line height = 16px × 150% = 24px */
}

Composition of a Line Box

1. Content area: Height determined by the font itself.
2. Leading: The space above and below the content area, calculated by subtracting the content area height from the line height and distributed evenly.
3. Line box height = Content area height + Top and bottom leading.

Practical Application Scenarios

1. Vertical Centering of Single-line Text

.button {
  height: 40px;
  line-height: 40px; /* Line height equals container height */
  text-align: center;
}

2. Spacing Control for Multiline Text

.paragraph {
  font-size: 16px;
  line-height: 1.6; /* Comfortable reading line spacing */
  margin-bottom: 1em;
}

3. Differences in Inheritance Behavior

.parent {
  font-size: 16px;
  line-height: 1.5; /* Child elements inherit the computed value, 24px */
}

.parent {
  font-size: 16px;
  line-height: 150%; /* Child elements inherit the computed value, 24px */
}

/* It is recommended to use numbers because the ratio is inherited, not a fixed value */
.parent {
  font-size: 16px;
  line-height: 1.5; /* Child elements recalculate based on their own font size */
}

Common Issues and Solutions

1. Bottom Gap Issue with Images

.container img {
  vertical-align: middle; /* or display: block */
  /* Solves the bottom gap caused by line height */
}

2. Impact of Line Height on Layout

.inline-element {
  line-height: 0; /* Can eliminate default spacing between inline elements */
}

Best Practice Recommendations

1. Body text typically uses a line-height ratio of 1.5-1.6 for optimal readability.
2. Headings can use a smaller line height (1.2-1.3) to maintain compactness.
3. Use numbers instead of fixed values for easier responsive design and inheritance management.
4. Consider the x-height differences of various fonts and adjust line height accordingly.

By deeply understanding how line-height works, you can more precisely control the vertical typography of text and create web layouts that are more readable and aesthetically pleasing.