如何调整导航栏中公司logo与公司名称文本之间的间距

实现方案 #

你可以通过以下两种方式调整logo与公司名称的间距：

方法1：使用Flex布局gap属性（推荐）

直接在.navbar的样式中新增gap属性，统一控制flex子元素的间距，数值可按需调整：

@media screen and (min-width: 768px) {
    .navbar {
        display: flex;
        padding-bottom: 0;
        height: 70px;
        align-items: center;
        position: absolute;
        top: 0px;
        width: 100%;
        margin-right:200px;
        flex-direction:row;
        gap: 24px; /* 新增这行，数值越大间距越大 */
    }
}

方法2：给单个元素添加外边距

如果仅需要调整这两个元素的间距，不影响后续新增的导航栏元素，可以给logo加右外边距，或者给公司名称h1加左外边距：

/* 方案A：给logo加右外边距 */
.logo {
    margin-right: 24px;
}

/* 方案B：给h1加左外边距，二选一即可 */
.navbar h1 {
    margin-left: 24px;
}

如果需要所有设备尺寸下都生效，把新增的样式写在@media查询块外部即可。

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