Next.js博客应用Post组件margin-left导致超出父容器宽度求助

我正在开发基于Next.js的博客应用，目前处于设计阶段，遇到了布局问题：创建了PostsContainer容器用于存放所有Post组件，Post组件由Post Header、Post Body、Post Footer三个子容器组成，但为Post组件设置margin-left: 25px后，它会超出PostsContainer的宽度。

问题原因 #

给Post组件设置width: 100%同时添加margin-left: 25px后，虽然全局配置了box-sizing: border-box，但该属性仅将padding和border纳入元素宽度计算，margin是在元素外部的空间，因此Post的总占用宽度会变成父容器宽度 + 25px，最终超出PostsContainer的范围。

解决方法 #

有两种实用的修复方式：

方法一：父容器加内边距，子元素移除外边距（推荐） #

把缩进逻辑转移到父容器PostsContainer上，给它添加左侧内边距，同时移除Post的左侧外边距，这样所有Post会自动缩进，且不会超出容器宽度，布局逻辑更清晰易维护。

修改Home.css中的PostsContainer样式：

.PostsContainer{
    width: 100%;
    height: 100%;
    padding-left: 25px; /* 添加左侧内边距 */
}

修改Post.css中的Post样式：

.Post{
    height: 130px;
    width: 100%;
    border-bottom: 1px solid grey;
    /* 移除 margin-left: 25px */
}

方法二：用calc计算子元素宽度 #

如果必须保留Post的margin-left，可以使用CSS的calc()函数动态计算宽度，让元素宽度减去左侧外边距的数值：

修改Post.css中的Post样式：

.Post{
    height: 130px;
    width: calc(100% - 25px); /* 替换原width:100% */
    border-bottom: 1px solid grey;
    margin-left: 25px;
}

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