Flex导航栏背景色无法覆盖子元素问题咨询及永久方案寻求

核心修复步骤 #

给nav元素添加box-sizing: border-box属性，修改后的CSS如下：

nav{
    background-color: #21222A;
    display: flex;   
    align-items: center;
    height: 91px;
    padding: 20px 25px;
    box-sizing: border-box; /* 新增此行 */
}

原因说明 #

默认情况下CSS的box-sizing属性值是content-box，这意味着你设置的height仅代表元素内容区域的高度，padding会额外增加元素的总高度。你的nav设置了height:91px和上下各20px的padding，实际总高度会变成91 + 20*2 = 131px，这会导致导航栏的背景范围和预期高度不符，视觉上看起来子元素区域没被背景覆盖。

添加box-sizing: border-box后，padding会被包含在你设置的height内，nav的总高度保持91px，背景色会填充整个导航栏区域。而子元素默认背景为透明，只要它们在nav的范围内，就会自动显示父元素的背景色，完全不需要给子div单独设置背景色。

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