如何让footer-info与socials元素更贴近？前端布局问题求助

问题根源 #

• .footer 类设置了 font-size: 100px，超大字号会继承给内部所有元素（包括<a>标签），导致<a>标签默认尺寸被异常拉伸，出现18x133的奇怪大小。
• .footer-info 的 padding-top:40px 加上 .footer 自身的 padding-top:30px，进一步拉大了两个元素的间距。

修复步骤 #

1. 修正footer基础样式 #

先重置.footer的超大字号，避免继承导致的尺寸异常：

.footer { 
    background-color: rgb(32,35,41);
    font-size: 1rem; /* 重置为默认字号，消除继承问题 */
    padding-top: 30px;
    padding-bottom: 30px; /* 增加底部内边距，避免社交图标贴底 */
}

2. 缩小两个元素的间距 #

调整.footer-info的内边距和外边距，直接控制与socials的距离：

.footer-info {
    display: flex;
    justify-content: center;
    list-style: none;
    padding-top: 10px; /* 从40px改为10px，减少顶部留白 */
    margin: 0 0 15px 0; /* 用底部外边距控制和socials的间距 */
    font-size: 15px;
    font-weight: 750;
    color: rgb(158, 158, 158);
}

3. 固定socials a标签尺寸 #

现在可以安全设置<a>标签的宽高，同时确保样式生效：

.socials a {
    display: inline-block; /* 确保宽高样式能生效 */
    width: 18px;
    height: 18px;
    margin: 0 10px; /* 只保留左右间距，去掉上下margin进一步缩小距离 */
}

4. 确保SVG图标自适应容器 #

给SVG添加样式，让它填满父容器，避免错位：

.socials svg {
    width: 100%;
    height: 100%;
}

最终效果 #

• .socials a 会固定为18x18的正常尺寸，不再出现拉伸
• footer-info与socials的间距大幅缩小，布局完全正常
• 整个footer的样式紧凑协调

内容的提问来源于stack exchange，提问作者alessi.gg