How to reduce spacing between antd Form.Items?

Question

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.

Answer 1

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 .css file and importing it