带红色边框的col-auto为何高度超出内部内容？

原因分析 #

1. HTML结构不规范触发怪异模式：你把样式表的<link>标签放在了<!DOCTYPE html>声明之前，这会让浏览器进入怪异模式，旧的CSS渲染规则会导致元素高度计算异常，使得红边框的.col-auto高度超出预期。
2. 内边距导致的视觉差异（可选）：.col-auto上的py-2类添加了上下内边距，这会让它的高度比内部黄边框的row高，这是内边距的正常效果，但如果不符合你的需求，也会被视为高度异常。

解决方案 #

1. 修正HTML结构（核心修复） #

将所有<link>标签移到<head>内部，确保<!DOCTYPE html>是文档第一行，让浏览器使用标准模式渲染：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet"/>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet"/>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>

2. 调整内边距（按需选择） #

• 如果希望.col-auto高度和内部row完全一致，直接去掉.col-auto上的py-2类；
• 如果需要保留内边距，可换成更小的内边距值，比如py-1。

内容的提问来源于stack exchange，提问作者sumeshsn1