Detailed Explanation of the vertical-align Property in CSS

I. Property Description
vertical-align is a CSS property used to control the vertical alignment of inline-level elements or table cell content. It only applies to the following elements:

• Inline-level elements (inline, inline-block)
• Table cells (table-cell)
• The ::first-letter and ::first-line pseudo-elements

II. Detailed Classification of Property Values

1. Baseline-related Values

• baseline (default): Aligns the element's baseline with the parent's baseline.
• sub: Lowers the element's baseline to the subscript position of the parent.
• super: Raises the element's baseline to the superscript position of the parent.

2. Vertical Position Values

• top: Aligns the top of the element with the top of the line box.
• middle: Aligns the middle of the element with the parent's baseline plus half the x-height.
• bottom: Aligns the bottom of the element with the bottom of the line box.

3. Length/Percentage Values

• Specific values (e.g., 2px): Offsets the element's baseline upward or downward relative to the parent's baseline.
• Percentage values (e.g., 50%): Calculates the offset based on the element's own line-height.

III. Common Use Cases

Case 1: Aligning Text with Icons

.icon {
  vertical-align: middle; /* Vertically centers the icon with the text */
  width: 16px;
  height: 16px;
}

Principle: Aligns the middle of the icon with the position of the text baseline plus half the x-height.

Case 2: Vertically Centering Content in Table Cells

td {
  vertical-align: middle; /* Vertically centers cell content */
}

Case 3: Eliminating Space Below Images

img {
  vertical-align: bottom; /* Eliminates the mysterious space below images */
}

Principle: Default baseline alignment reserves space for descending letters; bottom alignment eliminates it.

IV. In-depth Analysis

1. Mathematical Principles of Baseline Alignment

• Baseline: The reference line at the bottom of the letter 'x'.
• x-height: The height of a lowercase 'x'.
• Median: The position halfway up the x-height from the baseline.

2. Composition of the Line Box

<span style="font-size: 20px;">Text</span>
<span style="font-size: 40px; vertical-align: middle;">Large Text</span>

The line box height is determined by the top of the tallest element and the bottom of the lowest element.

3. Special Effects of Negative Value Offsets

.badge {
  vertical-align: -0.25em; /* Slight upward shift to create a badge/subscript effect */
}

V. Solutions to Common Problems

Problem 1: Unwanted Space Below Images

/* Solution 1 */
img { display: block; }

/* Solution 2 */  
img { vertical-align: bottom; }

/* Solution 3 */
.container { line-height: 0; }

Problem 2: Vertically Centering Elements of Different Sizes

.container {
  line-height: 100px; /* Set the line height */
}
.icon, .text {
  vertical-align: middle; /* Use middle alignment consistently */
}

VI. Best Practice Recommendations

1. Use vertical-align: middle consistently for icon alignment.
2. Prefer vertical-align: middle for table cell content.
3. Avoid mixing different alignment methods.
4. Understand the principle of baseline alignment before using percentage values.

By mastering the working principles of vertical-align, you can precisely control the vertical alignment of inline elements and solve common layout alignment issues.