How does one reduce the amount of space between two Form.Item's in a Form?
for example in any of the antd form examples the spacing between a Form.Item is all the same and (to my eye) rather large.
2 Answers
You need to style the Form.Item component, for example with inline-style:
// The current form item is margin 15px top.
<Form.Item style={{ marginBottom: "0px" }}>
<Input />
</Form.Item>
Or the entire Form by overriding the css-class, for example with CSS-in-JS:
// Apply style to all form
const StyledForm = styled(Form)`
.ant-form-item {
margin-bottom: 0px;
}
`;
Demo:
Same can be achieved with
.cssfile and importing it
First find the style that is achieving what you want to override, the override it by importing custom css. Your example:
.ant-form-inline .ant-form-item {
margin-right: 8px; // default is 16px
}
Related