如何缩小响应式页面中class为item的元素之间的间距

问题根因 #

1. CSS语法错误：你写的margin: none、padding: none不属于合法的CSS属性值，浏览器会直接忽略这类规则，所以你的修改没有生效。要清空边距应该使用margin: 0、padding: 0。
2. 原有样式优先级更高：默认.item类中设置的padding: 35px是导航项间距过大的核心原因，35px的上下内边距会把每个导航项的高度撑得很高，视觉上就会显得间距非常大。

修复方案 #

你可以根据需求选择全局调整或者仅在移动端响应式场景下调整：

1. 全局缩小导航项间距

直接修改默认.item的边距参数即可，示例：

.item {
  margin: 2px 0; /* 上下外边距从5px改成2px，按需调整数值 */
  font-size: 25px;
  text-decoration: none;
  font-family: Comic Sans MS;
  padding: 8px 0; /* 上下内边距从35px改成8px，左右内边距设为0，按需调整 */
}

如果需要更精准控制flex布局下的子项间距，也可以给.menu加gap属性：

.menu {
  display: flex;
  flex-direction: column;
  gap: 4px; /* 直接控制导航项之间的间距，数值按需调整 */
  /* 原有其他属性保留 */
}

2. 仅在移动端（宽度<=800px）缩小间距

修正媒体查询里的错误语法，同时用更高优先级的规则覆盖默认样式即可，示例：

@media(max-width: 800px) {
  body {
    height: auto;
  }
  .wrapper {
    display: block;
  }
  .menu {
    border: none;
    background-color: antiquewhite;
    margin: auto;
    padding: 10px 0; /* 把无效的padding:none改成实际数值，这里设为上下10px、左右0，按需调整 */
    height: auto;
    width: 100%;
    text-align: center;
    gap: 2px; /* 移动端导航项间距设为2px，按需调整 */
  }
  .item {
    margin: 0 !important; /* 加!important覆盖默认的margin规则，也可以用更高优先级的选择器代替 */
    padding: 6px 0 !important; /* 覆盖默认的padding:35px规则 */
    border: none;
  }
  a {
    border: none;
    padding: 0; /* 把无效的padding:none改成合法值 */
  }
  h1 {
    border-bottom: none;
  }
  .video,
  iframe {
    display: block;
    margin: auto;
  }
}

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