Angular中数据变更后列表元素间距出现异常变化该如何解决

该问题是CSS标准特性导致的，和Angular框架无关联：

• 短列表状态下.item的display属性为inline-block，inline-block元素不会触发垂直外边距折叠，因此上下两个相邻元素的间距为上元素的margin-bottom:20px加下元素的margin-top:20px，总间距为40px。
• 当列表长度超过8条时，.item的display属性切换为block，块级元素默认会触发垂直外边距折叠，上下相邻元素的margin-bottom和margin-top会合并为两者中的较大值，此处两个margin都是20px，因此合并后总间距仅为20px，视觉上就会出现间距变小的现象。

可根据实际需求选择对应方案：

方案1：保持长短列表视觉间距一致（均为40px） #

给长列表下的.item新增样式，修正折叠后的间距，同时兼容最后一个元素的边距：

.container.large-list .item{
  display: block;
  width: unset;
  /* 调整垂直边距抵消折叠效果 */
  margin: 20px 20px 40px;
}
/* 移除最后一个元素多余的底部边距 */
.container.large-list .item:last-child {
  margin-bottom: 20px;
}

方案2：统一长短列表间距为20px #

修改默认.item的边距规则，仅设置单边垂直边距，从根源避免折叠问题：

.container .item {
  display: inline-block;
  width: 20%;
  border: solid 1px red;
  /* 仅保留底部垂直边距，不设置顶部边距 */
  margin: 0 20px 20px;
}

该方案下无论元素是inline-block还是block类型，相邻元素的垂直间距都会保持为20px，不会出现变化。

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