页脚高度调整及社交图标间距设置问题求助

调整页脚高度 #

如果页脚对应的元素是.item4，可以通过以下样式强制设置高度并优化内容对齐：

.item4 {
  min-height: 120px; /* 设置最小高度，避免内容过少时高度不足，可按需调整数值 */
  display: flex;
  align-items: center; /* 让页脚内容垂直居中 */
}

如果页脚属于网格布局的一部分，还需要检查父级grid-container的行高配置，确保对应网格行的高度符合需求：

.grid-container {
  grid-template-rows: auto auto auto 120px; /* 最后一行对应页脚，设置固定高度 */
}

添加社交图标间距 #

针对社交图标，推荐两种简洁的间距设置方式：

方法1：Flex布局+Gap属性 #

如果图标被包裹在一个容器内，给容器添加Flex布局并直接设置间距：

.item4 .social-icons-wrap {
  display: flex;
  gap: 15px; /* 图标之间的间距，按需调整 */
}

方法2：直接给图标添加Margin #

如果是独立的img标签，可通过Margin设置间距，并移除最后一个图标的多余间距：

.item4 img {
  margin-right: 15px;
}
.item4 img:last-child {
  margin-right: 0;
}

样式生效排查 #

如果之前调整样式未生效，大概率是选择器优先级不足，可以通过增加父类前缀提升优先级，比如：

.grid-container .item4 img {
  margin-right: 15px;
}

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