如何消除电商网站mega menu中ul li元素间的空白

/* 重置子菜单ul的默认内外边距，消除浏览器自带空白 */
.porto-wide-sub-menu .sub-menu {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

/* 控制子菜单每个li的上下间距，确保无额外空白 */
.porto-wide-sub-menu .sub-menu > li {
  margin: 0;
  padding: 0;
  line-height: 1.2; /* 可选：缩小行高让文字更紧凑 */
}

/* 修正flex布局下父级li的对齐方式，避免多余空间 */
.porto-wide-sub-menu > li.sub {
  margin: 0;
  padding: 0;
  align-self: flex-start; /* 让子项按自身内容高度排列，而非强制拉伸 */
}

/* 调整菜单链接的内边距，避免撑开li高度 */
.porto-wide-sub-menu .menu-item > a {
  padding: 3px 0; /* 按需调整，比默认值小即可 */
  display: block;
}

代码生效原因 #

1. 浏览器默认给<ul>设置了margin和padding-left，这是子菜单空白的常见来源，重置后能消除这部分额外空间。
2. 你的.porto-wide-sub-menu使用flex布局时，默认align-items: stretch会让所有子li高度一致，设置align-self: flex-start能让每个li按自身内容高度显示，避免强行拉伸带来的空白。
3. 菜单的<a>标签通常带有默认上下内边距，缩小这个值可以直接减少
4. 的上下高度，让元素紧密衔接。

如果仍有空白，可打开浏览器开发者工具（F12），选中对应的