为何我的Grid/Flex布局内容向右偏移？技术求助

问题描述 #

我正在深入学习Grid/Flex在响应式布局中的应用。我有一个嵌套在Flex容器（代码未展示）内的Grid布局，始终无法消除左侧的偏移。原本以为使用Grid或Flex可以让元素在页面上均匀分布，且外侧边距一致，但现在内容出现了向右偏移的情况，想请教问题原因，应该是遗漏了基础知识点。

HTML代码 #

<div class="wrapper">
    <ul class="parent">
        <li class="child">
            <p class="grandchild"><img  src="https://meta.stackexchange.com/Content/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e"> </p>
            <p class="grandchild">Text 1 - This needs to go below the first image</p>
        </li>
        <li class="child">
            <p class="grandchild"><img src="https://meta.stackexchange.com/Content/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e"></p>
            <p class="grandchild">Text 2 - This needs to go below the second image, but in a second column </p>
        </li>
    </ul>
</div>

CSS代码 #

img {
    border:3px solid green;
    width:100%;
}
li {
    list-style-type: none;
}
.parent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 2rem;
    align-content:center;
}
.child  {
    margin:0;
    padding:2rem;
}
.grandchild {
    border:1px dashed black;
}

问题原因与解决方法 #

核心原因 #

浏览器默认给<ul>标签设置了padding-left（通常为40px），你仅清除了列表项的项目符号，但未清除父容器<ul>的默认内边距，这直接导致整个Grid容器向右偏移，看起来像是左侧存在margin。

解决方法 #

方法1：直接清除ul的默认内边距

给.parent类添加padding: 0，覆盖浏览器默认样式：

.parent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 2rem;
    align-content:center;
    padding: 0; /* 新增该行清除默认内边距 */
}

方法2：全局样式重置（更推荐）

在CSS开头添加全局重置代码，彻底消除浏览器默认样式的干扰，同时统一盒模型计算方式：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

额外优化建议 #

如果希望整体布局外侧有统一边距，建议给外层的.wrapper添加padding，而非依赖元素默认样式，这样布局逻辑更清晰可控。

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