删除冗余<html>标签后.row类左右padding消失，求原因与解决方法

为啥会出现这情况？ #

• 之前在<!DOCTYPE html>前加了多余的<html lang="en">标签，浏览器碰到这种不符合规范的结构，会自动切换到怪异模式——这是浏览器为兼容早年不标准的老网页搞的特殊渲染规则。在这个模式下，浏览器会自动给部分容器元素补额外内边距，刚好让你的.row看起来有左右padding，显示正常。
• 删除多余标签后，浏览器切换到标准模式，严格按W3C规则解析CSS和HTML。这时候如果.row类本身没定义明确的左右padding，或者父容器的布局规则在标准模式下的计算方式改变，原本靠怪异模式“凑出来”的padding就会消失，视觉上出现异常。

怎么修复？ #

方法1：直接给.row添加明确的padding #

在CSS里补充这段代码：

.row {
  padding-left: 15px; /* 数值可根据实际显示需求调整 */
  padding-right: 15px;
}

这是最直接的方案，强制固定.row的左右内边距，无论浏览器处于哪种模式，都能保持一致的显示效果。

方法2：统一父容器与.row的盒模型规则 #

如果.row的padding是依赖父容器（比如container类）的样式间接实现的，要确认相关元素的box-sizing属性是否为border-box——标准模式下盒模型的计算逻辑和怪异模式不同，border-box能让元素的padding、border纳入宽度计算，避免布局偏移：

.container, .row {
  box-sizing: border-box;
}

统一盒模型规则后，可避免标准模式下的布局计算偏差。

方法3：确保HTML结构完全合规 #

删除多余标签后，检查HTML开头是否为标准结构，避免嵌套错误或未闭合标签导致的渲染异常：

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 头部meta、样式等内容 -->
</head>
<body>
  <!-- 页面主体内容 -->
</body>
</html>

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