CODEWITHSUNDEEP
cssreactjsflexboxantd
jupiteror
jupiteror

Reputation: 1205

Remove extra top margin for Ant Design Tag

I'm using antd Tag component, which has display: inline-block; property. So it has some extra margin on the top. I would like to remove this extra margin. I've placed the Tag inside a container and added a fix:

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")
);

Is there any other way to fix this problem, without adding an extra container for tags?

Here is a link to codesandbox.

This is a screenshot without the fix (there is a margin above tags around 2 px).

enter image description here

And here is a screenshot with the fix.

enter image description here

Upvotes: 1

Views: 2198

Answers (1)

Tanner Dolby
Tanner Dolby

Reputation: 4421

You could add vertical-align: top on each inline-block Tag component to get rid of the extra top spacing.

Also, the height of a line box is determined by the rules given in the section on line height calculations. I added the necessary CSS for the .ant-tag selector if you'd like to vary the line box height on Tag components.

Here is a link to the fixed CodeSandbox

Upvotes: 1

Related Questions