🧐[问题]ProCard的gutter和antd的Row的gutter有差异

[skyblue]

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🧐 问题描述

使用antd的Row/Col栅格布局, 有gutter时, Row会加上负margin,
而ProCard的gutter没有

💻 示例代码

···


···

🚑 其他信息

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns.
此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

Hi! 感谢您的问题。根据您的描述，您想知道为什么使用 ProCard 的 gutter 属性时没有应用负 margin，而使用 antd 的 Row 组件的 gutter 属性会应用负 margin。

这是因为 ProCard 是 antd 的一个组件，它内部已经为您处理了负 margin 的问题。而 antd 的 Row 组件是直接提供给用户使用的，所以您需要手动处理负 margin。

解决这个问题有两种方法：

1. 使用 ProCard 来实现布局，并在其内部使用 ProCard 的 gutter 属性来设置间距。

<ProCard gutter={24}>
  <ProCard>
    {/* 内容 */}
  </ProCard>
  <ProCard>
    {/* 内容 */}
  </ProCard>
</ProCard>

2. 如果您仍然想使用 antd 的 Row 组件，您可以手动添加负 margin 来实现相同的效果。

<Row gutter={24} style={{ marginLeft: -12, marginRight: -12 }}>
  <Col span={12}>
    {/* 内容 */}
  </Col>
  <Col span={12}>
    {/* 内容 */}
  </Col>
</Row>

希望以上解决方案对您有帮助。另外，您可以查阅以下文档来获取更多信息：

• ProCard 组件文档: https://procomponents.ant.design/components/card
• antd 的栅格系统文档: https://ant.design/components/grid/

如果您对此还有其他问题，请随时继续提问。

[skyblue]

... 弄反了
是Row 有负 margin, ProCard没有