CSS响应式中<a>标签与图片适配问题：图片缩小后标签尺寸未变

问题出在包裹logo的<a>标签默认尺寸没有跟随内部img的变化，导致它占据了多余空间，进而和h1产生异常间距。以下是几种可行的修复方式：

方式一：让<a>标签尺寸完全贴合img #

给包裹logo的<a>标签添加样式，强制它的尺寸匹配内部img：

/* 针对包裹logo的第一个a标签 */
header > a:first-child {
  display: inline-block;
  width: fit-content;
  margin: 0;
  padding: 0;
}

width: fit-content会让<a>标签的宽度刚好容纳img，不会产生多余空间；重置margin和padding是为了清除浏览器默认样式的影响。

方式二：用Flex Gap控制间距（更推荐） #

利用flex容器的gap属性直接控制两个<a>标签之间的间距，替代h1的margin-left，这样间距更可控，也能避免<a>标签尺寸带来的问题：

修改后的CSS： #

header {
    background-color: #4B002C;
    color: #000000;
    padding: 10px;
    height: 14vh;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px; /* 直接设置两个子元素的间距，可根据需求调整 */
}

.logo {
    height: 12vh;
    width: 26vw;
    display: block; /* 去掉img默认的行内元素额外间距 */
}

h1 {
    margin: 2px 0 0 0; /* 移除左边的margin */
    padding: 0 68px 0 0;
    font-weight: bold;
    font-size: 5vw;
    text-align: center;
    color: #ffc660;
}

移动端适配调整： #

@media (max-width: 480px) {
    header {
        height: auto;
        padding: 10px;
        gap: 10px; /* 移动端可缩小间距 */
    }

    header > a:first-child {
        width: fit-content; /* 确保a标签贴合img */
    }

    .logo {
        width: 55%;
        height: auto;
    }

    h1 { 
        font-size: 5vw;
        margin: 0;
        padding: 0;
    }
}

方式三：让img块级化 #

给.logo添加display: block，消除img作为行内元素时可能产生的底部留白，同时让<a>标签的尺寸更贴合img：

.logo {
    height: 12vh;
    width: 26vw;
    display: block;
}

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