如何移除Flex布局中的底部多余内边距？

针对你遇到的about模块.row Flex容器底部多余内边距问题，按以下步骤排查解决，每一步都适合新手操作：

1. 检查.row自身的内边距/外边距

   • 打开浏览器开发者工具（按F12键，或右键页面选「检查」）
   • 在元素面板选中.row容器，右侧「样式」面板里找padding-bottom和margin-bottom属性
   • 如果看到这两个属性有非0的值，直接在你的CSS里添加：

     .row {
       padding-bottom: 0;
       margin-bottom: 0;
     }
     

2. 排查子元素的底部外边距溢出
   Flex容器的子元素如果设置了margin-bottom，有时候会“穿出”容器，看起来像是容器的内边距。解决方法二选一：

   • 给.row添加溢出隐藏样式：

     .row {
       overflow: hidden;
     }
     

   • 或者直接清除子元素的底部外边距（假设子元素类是.col）：

     .row .col {
       margin-bottom: 0;
     }
     

3. 检查是否存在伪元素干扰
   有些教程或CSS代码会给容器加::after这类伪元素，可能附带了padding/margin。在开发者工具的元素面板里，展开.row看看有没有::after节点：

   • 如果有，在CSS里重置伪元素样式：

     .row::after {
       content: "";
       margin: 0;
       padding: 0;
       height: 0;
       visibility: hidden;
       clear: both; /* 如果是浮动布局遗留的伪元素，保留clear:both即可 */
     }
     

4. 重置全局默认样式（预防后续问题）
   浏览器自带的默认样式经常会干扰布局，给新手推荐全局重置代码，放在CSS最顶部：

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box; /* 让内边距不会撑开元素宽度 */
   }
   

如果以上步骤还没解决，你可以把.row及其子元素的完整CSS代码贴出来，我再帮你针对性调整。

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