How to Remove The Default Padding in Antd

How to remove the default padding in antd

You would have to manually overwrite the styling.

You can add a custom class to panel:

 <Panel header="This is panel header 1" key="1" className="custom">

and Add less:

.custom {
  .ant-collapse-content-box {
    padding: 0;
   }
}

https://codepen.io/kossel/pen/gooQqv

Remove default padding from Ant design table

You can be found these className in the node_modules folder. node_modules/antd/es. Then, you found the index.css file lists out all of the classNames and attributes that are editable.
or
you can be use

.ant-table-tbody{
  padding: 0 !important;
}
.ant-table-tbody > tr > td{
  padding: 0 !important;
}

How to remove padding in Ant Design menu?

<Menu inlineIndent={0} />

How to remove padding in antd form label

To apply this change on a global level, we can resolve this by editing a less-variable and apply a custom theme.

The corresponding variable is defined here: https://github.com/ant-design/ant-design/blob/ea2545fbc7d02df4efa1b77467672a681158fec0/components/style/themes/default.less#L373

@form-vertical-label-padding: 0;

How to remove the margin in a antd drawer

If you want remove the red margin, you need set padding left and right to 0 and remain the 24px in vertical sides:

.ant-drawer-body {
    flex-grow: 1;
    padding: 24px 0; // <-- This 0 do the work
    overflow: auto;
    font-size: 14px;
    line-height: 1.5715;
    word-wrap: break-word;
}

For the blue underscore (your green signal in the image), you must change this style:

.ant-menu-horizontal > .ant-menu-item::after, .ant-menu-horizontal > .ant-menu-submenu::after {
    position: absolute;
    right: 0; // <-- 0 instead 20px
    bottom: 0;
    left: 0; // <-- 0 instead 20px
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    content: '';
}

React Antd: How to remove spacing between vertical divider and any content right next to it?

Set padding:0px to div#container

Antd Steps by default has a div with id=container and padding=24px

Sample Image

The extra space you see is due to that div-padding.

You can remove it by defining the following code in styles.css and importing the styles in the component.

styles.css

div#container {
  padding-left: 0px !important;
}

Check this sandbox for more understanding

How to Remove The Default Padding in Antd