设置自定义字体后为标题添加margin-bottom失效该如何解决

问题原因 #

1. .header 配置了固定高度 height: 91px 和 overflow: hidden，内部元素添加的底部边距如果超出91px范围会被直接裁剪，无法显示出留白效果。
2. 你的logo使用的<a>标签属于行内元素，默认不支持上下margin、padding属性的生效，调整这两个值自然看不到效果。
3. 自定义字体默认行高与系统字体存在差异，可能会出现内容溢出自带裁剪的情况。

修复方案 #

• 首先调整.header的样式，移除固定高度改用padding控制留白，根据需要决定是否保留overflow:hidden：

.header{
    background-color: #000000;
    width: 100%;
    padding: 15px 0 30px 0; /* 按需调整最后一个数值，控制底部留白大小 */
    /* 移除原有 height:91px 和 overflow:hidden 配置，如果不需要隐藏溢出内容可直接删除这两个属性 */
}

• 给logo标签添加块级属性，让上下边距可以正常生效，同时适配自定义字体的行高：

.header a.logo {
    display: inline-block;
    font-family: Wiz;
    font-size: 55px;
    font-weight: bold;
    line-height: 1.2; /* 避免自定义字体出现上下裁切 */
    margin-bottom: 20px; /* 可按需调整，给logo单独添加底部边距 */
}

• 可以在全局样式中添加行高兜底，避免自定义字体导致的布局偏移：

* {
    box-sizing: border-box;
    line-height: 1.5;
}

如果以上调整都无法满足需求，直接给.header-box添加padding-bottom属性即可强制增加底部留白，优先级更高不会被父级样式覆盖。

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