根本原因是表单控件默认content-box且各浏览器对border、padding、font-size、line-height渲染不一致，尤其select/button受系统UI影响；仅box-sizing:border-box不够，须重置margin、vertical-align、font-family、font-...

子元素margin会让父元素“被撑开”是因margin塌陷：子元素垂直外边距与父元素边界合并；触发BFC（如display:flow-root）可彻底解决，语义清晰且无副作用。

CSS工具类命名应优先语义化而非简短，如mt-4明确表示上边距，而margin-2易引发歧义；间距宜用CSS变量+calc()动态生成，颜色需分基础色板与语义类两层，组合类应聚焦高频业务场景而非像素级复用。

浮动导致父容器高度塌陷因父容器忽略浮动子元素高度；解决方法依次为：overflow:hidden触发BFC、display:flow-root（现代首选）、伪元素::after清除；clear:both须作用于浮动后的兄弟元素而非父容器；Flex/Grid布局下float失效，无需清除。

这是CSS外边距合并行为：父子元素间无border/padding时，子元素margin-top会与父元素上边缘合并，导致父容器下移；仅发生在垂直方向块级元素间，合并值取较大者，负值参与计算。

Tailwind表格需手动添加边框和间距：用borderborder-gray-300border-collapse配合px-4py-2；表头用bg-gray-50，奇偶行用odd:bg-whiteeven:bg-gray-50实现斑马纹；小屏用overflow-x-auto包裹确保响应式。