CSS Grid添加padding后溢出容器的原因咨询

嘿，这个问题刚好戳中了CSS Grid布局和盒模型的核心交互逻辑，我给你一步步理清楚：

1. 默认盒模型下，padding会“撑大”Grid容器 #

你一开始设置footer { width: 100% }，这里的100%是指容器内容区域占body宽度的100%。当你添加padding-left: 10%时，在默认的box-sizing: content-box规则下，容器的总宽度会变成：
内容区宽度（100% body） + 左padding（10% body）= 110% body宽度
这直接导致footer超出了body的范围，自然就溢出了。

哪怕你把网格列调整为25% + 65% = 90%，这个百分比也是基于容器内容区宽度（也就是100% body）来计算的。所以列的总宽度是90% body，加上10% body的padding，整个footer的总宽度还是110% body，溢出问题依然存在。

2. 为什么加10%的网格项能解决问题？ #

当你添加一个10%宽度的网格项后，三列总和变成10% + 25% + 65% = 100%，这个100%是容器内容区的100%（也就是body的100%）。此时footer的总宽度就是body的100%（因为容器没有额外的padding，内容区直接占满body），那个10%的空网格项相当于把logo和文本整体向右推了10%，视觉效果和padding类似，但本质是用网格列填充了容器的内容区，没有额外撑大容器宽度。

3. 更优雅的解决方案：用box-sizing: border-box #

其实你根本不需要额外加网格项，只需要给footer加上box-sizing: border-box属性，就能让padding被包含在容器的100%宽度内：

footer {
  width: 100%;
  padding-left: 10%;
  box-sizing: border-box; /* 关键属性 */
  display: grid;
  grid-template-columns: 25% 65%;
}

加上这个属性后，容器的总宽度会被限制为100% body，padding-left的10%会从内容区里扣除，内容区宽度变成90% body，你的25% + 65%刚好填满这个内容区，完美解决溢出问题。

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