Search code examples
htmlcssreactjsnext.jsantd

Ant Design: Adding margin and padding provoke markup twitches

enter image description here

enter image description here

If I add margin and padding for this class, it starts twitching like on first GIF.

If I remove margin and padding everything is good, but I need them for styling.

What causing this and how can I fix it?

1 GIF

.ant-layout.ant-layout-has-sider {
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px 0 0 0;
}

2 GIF

.ant-layout.ant-layout-has-sider {
  max-width: 1440px;
}
Solution

  • In case it will help someone: add hasSider prop for Antd Layout component