CSS设置p标签下边框padding-bottom提示无效属性值样式不生效

开发账户头部导航组件，需求为激活状态的导航项展示带内边距的底部边框标识，相关代码如下：

组件模板代码 #

<div class="account-header">
  <div class="account-header-inner">
    <div v-for="item in accountHeaderItems" :key="item.title" :class="[item.active ? 'active' : '']" class="item-box">
      <p :class="[item.active ? 'active' : '']" class="item" @click="changeSubpage(item)">
        {{item.title}}
      </p>
    </div>
  </div>
</div>

初始样式代码 #

.account-header {
  width: 100%;
  height: 50px;
  display: flex;
  position: absolute;
  .account-header-inner {
    width: 50%;
    margin: 0 auto;
    display: flex;
    border-bottom: 1px solid v.$main-color-light;
    @media only screen and (max-width: 930px) { width: 100%; }
    .item-box {
      height: calc(100% - 15px);
      padding-top: 15px;
      margin: 0 auto;
      &.active { border-bottom: 3px solid v.$main-color; }
      .item {
        cursor: pointer;
        margin: 0;
        color: rgba(#fff, 0.5);
        transition: .2s;
        &.active { color: v.$main-color-light;}
        @media screen and (max-width: 520px) { font-size: 12px; }
      }
      .item:hover { color: v.$main-color-light; }
    }
  }
}

异常现象 #

• 任意位置给激活元素添加padding-bottom规则都不生效
• 浏览器开发者工具中该属性提示Invalid property value
• 已排查无其他位置的样式覆盖问题
• 尝试在.item.active中新增padding-bottom: 15px后，属性依然提示无效，修改后代码如下：

.item-box {
  height: calc(100% - 15px);
  padding-top: 15px;
  margin: 0 auto;
  &.active { border-bottom: 3px solid v.$main-color; }
  .item {
    cursor: pointer;
    margin: 0;
    color: rgba(#fff, 0.5);
    transition: .2s;
    &.active { color: v.$main-color-light;  padding-bottom: 15px; }
    @media screen and (max-width: 520px) { font-size: 12px; }
  }
  .item:hover { color: v.$main-color-light; }
}

• 非标准CSS语法引发解析异常：样式内存在多处未编译的非标准写法，包括直接向rgba()传入十六进制色值rgba(#fff, 0.5)、直接引用未做全局注入的主题变量v.$main-color/v.$main-color-light，部分浏览器内核解析连续无效属性时，会将同规则块后续的合法属性误判为无效值，这是控制台提示属性无效的直接诱因。
• 布局逻辑存在硬编码冲突：.item-box被设置了固定高度calc(100% - 15px)+顶部内边距padding-top:15px，默认content-box盒模型下元素总高度刚好填满父容器，此时给子元素.item添加padding-bottom会直接触发内容溢出；同时激活态边框被加在父级.item-box上，而padding属于边框内侧间距，加在子元素上根本无法调整文字与边框的距离，实现思路本身存在偏差。

1. 先修正所有非标准CSS语法，消除解析错误：
   • 将rgba(#fff, 0.5)替换为标准写法rgba(255,255,255,0.5)，如果使用SCSS变量可写为rgba($white, 0.5)
   • 确认项目中已通过SCSS/LESS预处理器配置，将v.$main-color这类全局主题变量注入到样式编译流程中，未配置的话直接替换为实际色值或CSS变量即可。
2. 调整布局逻辑，去掉硬编码的固定高度，改用flex实现自适应对齐，将激活态边框和内边距直接绑定到导航文字元素上，避免父子元素样式冲突，最终可用样式如下：

.account-header {
  width: 100%;
  height: 50px;
  position: absolute;
  .account-header-inner {
    width: 50%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    border-bottom: 1px solid v.$main-color-light;
    @media only screen and (max-width: 930px) { width: 100%; }
    .item-box {
      margin: 0 auto;
      .item {
        cursor: pointer;
        margin: 0;
        padding: 0 12px 15px; // 15px即为文字与底部激活边框的间距
        color: rgba(255,255,255,0.5);
        border-bottom: 3px solid transparent; // 默认透明边框占位，避免切换激活态时文字跳动
        transition: all .2s ease;
        &.active {
          color: v.$main-color-light;
          border-bottom-color: v.$main-color;
        }
        @media screen and (max-width: 520px) { font-size: 12px; }
      }
      .item:hover { color: v.$main-color-light; }
    }
  }
}

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