I'm currently utilizing the antd Tag component, which comes with the property display: inline-block; causing some unwanted top margin. I am looking for a way to eliminate this extra margin without having to introduce an additional container for the tags. Below is my attempt at fixing the issue:
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")
);
Are there alternative methods to address this issue aside from using an extra tag container?
Link to view the implementation on codesandbox.
This image depicts the problem without the fix (showing a 2 px margin above the tags).
https://i.sstatic.net/wUXx2.png
And here is how it looks after applying the fix.