如何移除Ant Design默认内边距？可折叠侧边栏padding问题求助

这问题我之前也碰到过！Ant Design的<Panel>组件默认会给内容容器加上16px的内边距，你直接给内部的<p>标签设置padding: 0没用，因为这个内边距是来自Panel包裹内容的外层容器。给你两个靠谱的解决办法：

方法一：使用Panel的bodyStyle属性（推荐，组件级修改） #

Ant Design的Panel组件提供了bodyStyle属性，可以直接自定义内容区域的样式，这是最优雅的方式，不会影响其他组件：

render() {
  return (
    <div className="common-coll-bar">
      <Collapse>
        <Panel 
          header="Present Staffs" 
          style={customPanelStyle}
          bodyStyle={{ padding: 0 }} // 新增这个属性，直接去掉默认内边距
        >
          <p style={{ height: 550, color: '#131D43', background: '#607B7E', margin: 0 }}>
            {text}
          </p>
        </Panel>
      </Collapse>
    </div>
  );
}

方法二：自定义CSS覆盖全局样式（适合批量修改） #

如果你需要给多个Panel统一去掉内边距，可以通过CSS选择器覆盖Ant Design的默认样式：

/* 只针对你的common-coll-bar下的Collapse生效，避免全局污染 */
.common-coll-bar .ant-collapse-content-box {
  padding: 0;
}

为什么原来的代码没生效？ #

Ant Design的Panel会把你的内容包裹在一个带有ant-collapse-content-box类名的容器里，这个容器默认有padding: 16px的样式。你之前只给内部的<p>标签设置padding: 0，并没有修改外层容器的内边距，所以才看不到效果。

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