1. .ant-menu-vertical .ant-menu-submenu, .ant-menu-vertical-left .ant-menu-submenu, .ant-menu-vertical-right .ant-menu-submenu, .ant-menu-inline .ant-menu-submenu {
  2.     padding-bottom: 0.02px;
  3. }

System A is antd v3.26.6 while system B is v3.19.8, I am migrating A to B and find the menu li margin collapsed after the migration, so I looked deeper, and found that the newer version of antd menu has a padding-bottom: 0.02px; while the older is 0.01px, and put this in chrome for test, you can see 0.02px is the minimal pixel for browser to prevent the collapse while causing no difference to our eyes. Interesting one. So I checked antd’s code base, and here I see this comment:

  1.     // disable margin collapsed
  2.     .@{menu-prefix-cls}-submenu {
  3.       padding-bottom: 0.02px;
  4.     }

So, this is a design change. But why 0.01px in the beginning, the related commit. So it’s initially supposed to avoid the collapse, but incurred a bug, and later fixed.

more about vertical margin collapse

ref: https://css-tricks.com/what-you-should-know-about-collapsing-margins/

  • collapse happens when two elements with margins sit with each other
  • if both margins are positive numbers, then the bigger one effectives the margin between, while the smaller one is ‘swallowed’, ie bigger margin = total vertical margin
  • if there is a negative margin, the final margin should be total vertical margin = positive margin + negative margin , like 50px + (-25px)
  • if both are negative, then total vertical margin = smaller negative margin , like -25px and -50px , then the total margin should be -50px

    when parents ground their children

    As long as something solid sits between these margins, the should not collapse.
    So, if children are nested one by one, one way to avoid collapse is to give a padding to each layer: ```html

    Collapsing Child Margins

Collapsed

Not Collapsed

  1. ```css
  2. /* PRESENTATIONAL STYLES */
  4. html {
  5.   font-size: 16px;
  6. }
  8. body {
  9.   background-color: #333;
  10.   color: #fff;
  11.   font-family: Helvetica;
  12.   padding: 25px;
  13.   text-align: center;
  14. }
  16. h1 {
  17.   font-size: 2em;
  18.   font-weight: 800;
  19. }
  21. /* DEMO STYLES */
  23. /* Parent */
  24. div {
  25.   margin: 15px 0;
  26. }
  28. /* Add padding to the parent */
  29. .padding {
  30.   padding: 20px 0;
  31. }
  33. /* Here come the children */
  34. .red {
  35.   background-color: #ff6b6b;
  36. }
  38. .orange {
  39.   background-color: #ff9e2c;
  40. }
  42. .yellow {
  43.   background-color: #eeee78;
  44. }
  46. .green {
  47.   background-color: #4ecd9d;
  48. }
  50. .blue {
  51.   background-color: #4e97cd;
  52. }
  54. .purple {
  55.   background-color: #6c4ecd;
  56. }

image.png