Angular中使用ag-grid-angular如何去除单元格上下内边距

直接按以下步骤操作即可生效：

• 配置项层关闭默认内边距逻辑
  在网格初始化的gridOptions中加入如下配置，切断框架自动给单元格加内边距的逻辑：

  const gridOptions: GridOptions = {
    suppressCellPadding: true, // 核心配置：关闭ag-grid默认的单元格内边距计算
    rowHeight: 28, // 替换为你实际需要的行高，数值和内容高度完全匹配，不要留冗余
    defaultColDef: {
      cellStyle: {
        padding: 0 // 给所有列默认设置0内边距
      }
    }
  }
  

• 样式层覆盖主题默认内边距
  ag-grid的内置主题会强制给单元格写入上下内边距，需要在组件样式中用穿透选择器覆盖（Angular样式隔离场景下用::ng-deep即可）：

  ::ng-deep {
    .ag-cell,
    .ag-cell-wrapper .ag-cell {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      // 行高和你配置的rowHeight保持一致，保证单元格内容垂直居中
      line-height: 28px;
    }
    // 如果需要同步去除表头的上下内边距可保留以下代码，不需要可删除
    .ag-header-cell,
    .ag-header-group-cell {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
  }
  

• 排查自定义内容的额外边距
  如果你用了cellRenderer做自定义单元格渲染，检查自定义模板的根元素、内部元素是否有浏览器默认的margin/padding（比如<p>标签默认带上下margin），给自定义渲染内容的根元素加上margin: 0; padding: 0即可。

踩坑提示：不要尝试只改cellStyle不加样式覆盖，ag-grid主题的样式优先级高于普通cellStyle配置，必须加!important才能覆盖默认主题的内边距设置。

单元格上下内边距问题效果参考

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