移除 Ant Design Tag 的额外上边距答案

【问题标题】：Remove extra top margin for Ant Design Tag移除 Ant Design Tag 的额外上边距
【发布时间】：2023-03-12 19:55:01
【问题描述】：

我正在使用antd 标签组件，它具有display: inline-block; 属性。所以它在顶部有一些额外的边距。我想删除这个额外的边距。我已将标签放在容器中并添加了修复：

const Container = styled.div`
  font-size: 0;
  letter-spacing: 0;
  word-spacing: 0;
  background-color: red;
  height: 100px;
`;

ReactDOM.render(
  <Container>
    <Tag>Tag 1</Tag>
    <Tag>Tag 2</Tag>
    <Tag>Tag 3</Tag>
  </Container>,
  document.getElementById("container")
);

有没有其他方法可以解决这个问题，而无需为标签添加额外的容器？

这是codesandbox的链接。

这是未修复的屏幕截图（标签上方有 2 px 左右的边距）。

这是修复的屏幕截图。

【问题讨论】：

空格没有占据整个宽度。尝试将字体大小设置为大于等于 14px 的标签标题。或者您需要在标签按钮的顶部和底部放置填充。

标签： css reactjs flexbox antd

【解决方案1】：

您可以在每个 inline-block Tag 组件上添加 vertical-align: top 以消除额外的顶部间距。

此外，line box 的高度由行高计算部分中给出的规则确定。如果您想改变 Tag 组件的行框高度，我为 .ant-tag 选择器添加了必要的 CSS。

这是fixed CodeSandbox的链接

【讨论】：

不客气！我很高兴能帮上忙。如果您需要更多信息，MDN Flow Layout 是一个很好的资源。