Css 如何将ant.design的卡片制作得更小？

我正在使用ant.design

Card

组件在react/redux中显示聊天webapp的消息。现在每张卡片都在卡片周围留出了太多的空间。有没有办法让卡片更贴近文本

其中，React代码为：

                        <Card
                            bordered={false}
                            style={{
                                // other styles...
                                width: width,
                                height: 70 <== just decreasing this number doesn't work 
                            }}
                        >
                            <p>{message.contents}</p>
                        </Card>

---

我没有使用
卡
s，而是使用了一个常规的
p
标签，带有
边界半径
和
填充
：

                    <p
                        style={{

                            borderRadius: '25px',
                            padding: '4px 15px 4px'
                        }}
                    >



您可以使用内联样式属性
bodyStyle
将样式应用于卡内容

保持组件清洁的更好方法是使用
css

  <Card className="custom-card" bordered={false}>
    <p>Hey Hunter</p>
  </Card>

检查
我会首先检查开发工具中的元素，但更有可能的是，您应该将卡的高度设置为“自动”，并在内部文本中添加填充。将类放在p标记上：

{message.contents}

并针对它：

。消息内容{
填充：20px；
}

将卡内的空间设置为文本两侧的20px。把这个换成你想要的

我还建议在卡片上使用一个类，并将所有样式放在一个外部样式表中，但两者都可以
 您可以使用行的边沟属性作为栅格间距，建议将其设置为（16+8n）px。（n代表自然数。）

您可以将其设置为类似{xs:8、sm:16、md:24、lg:32}的对象，以实现响应性设计

您可以使用数组设置垂直间距，[水平，垂直][16，{xs:8，sm:16，md:24，lg:32}]。

段落周围有空白吗？如果是，你能删除它吗？@user6297534谢谢你的想法，但是
在itAny
padding
和/或
line height
样式周围没有空白？@natewittaker我不知道。
.custom-card {
  width: 100px;
  height: 35px;
}

.custom-card > .ant-card-body {
  display: table; 
  width: 100%;
  height: 100%;
  padding: 5px;
}

.custom-card > .ant-card-body > p {
  text-align:center; 
  vertical-align: middle;
  display: table-cell; 
}