使用CSS Flexbox布局时按钮的margin-top不生效该如何解决？

问题根因 #

你当前给flex容器设置的margin: 20px是容器本身和页面其他元素的间距，不会控制容器内换行后的行间距，也不会控制子按钮之间的间距。你之前设置margin-top/padding不符合预期，通常是两个原因：一是把属性错加在了容器而非子按钮上，二是如果给子按钮加了margin-top，会导致第一行按钮顶部也出现多余的不需要的间距。

最优解决方案 #

直接在flex容器的CSS中新增row-gap属性即可，该属性专门用于控制flex布局换行后的行间距，不会产生多余边距，也不需要额外修改子元素样式：

help-me-stackoverflow {    
    display: flex;    
    justify-content: space-around;    
    flex-wrap: wrap;
    row-gap: 16px; /* 可按需调整数值，即为上下行的间距 */
    /* 如果需要调整同一行按钮之间的间距，可新增column-gap属性
    column-gap: 8px;
    也可以用gap简写同时设置行列间距：gap: 16px 8px; */
    margin: 20px; 
}

老旧浏览器兼容方案 #

如果需要兼容不支持gap属性的低版本浏览器，可以给所有子按钮设置统一的上边距，再配合容器的负上边距抵消第一行顶部的多余间距：

/* 容器样式 */
help-me-stackoverflow {    
    display: flex;    
    justify-content: space-around;    
    flex-wrap: wrap;
    margin: 20px; 
    margin-top: -16px; /* 和子按钮margin-top数值保持一致 */
}
/* 子按钮样式，替换为你实际的按钮类名 */
help-me-stackoverflow .btn {
    margin-top: 16px; /* 按需调整数值，即为上下行的间距 */
}

内容的提问来源于stack exchange，提问作者easymoney