a标签设为inline-block时border-box属性不生效问题求助

嘿，我来帮你拆解下这个问题～其实你的box-sizing:border-box是正常生效的，只是你没注意到border变化带来的尺寸差异！

问题原因 #

box-sizing:border-box的作用是把元素的border、padding都算进总宽高里，但当你给.active类设置border:0时，这个元素的总宽度就比普通a标签少了2px（原来的左右border各1px，现在没了）。所以两个链接看起来宽度不一样，让你误以为box-sizing没生效，但实际上它一直在按规则工作。

几种解决方案 #

我给你推荐几个实用的解决办法：

• 用透明边框替代border:0
  保持border的宽度不变，只是把颜色设为透明，这样元素的总宽高和普通a标签完全一致：

  a{ 
    display:inline-block; 
    background:#fff; 
    border:1px solid #ccc; 
    box-sizing:border-box; 
    padding:1rem; 
  }
  a.active{ 
    border:1px solid transparent; /* 关键修改 */
    background:orange; 
  }
  

• 给所有a标签设置固定宽度
  直接指定宽度，不管border和padding怎么变，总宽度都固定：

  a{ 
    display:inline-block; 
    background:#fff; 
    border:1px solid #ccc; 
    box-sizing:border-box; 
    padding:1rem; 
    width: 80px; /* 固定宽度 */
    text-align: center; /* 文字居中对齐 */
  }
  a.active{ 
    border:0; 
    background:orange; 
  }
  

• 用CSS变量统一边框宽度
  如果之后需要调整边框宽度，只要改变量就行，更灵活：

  :root {
    --border-width: 1px;
  }
  a{ 
    display:inline-block; 
    background:#fff; 
    border:var(--border-width) solid #ccc; 
    box-sizing:border-box; 
    padding:1rem; 
  }
  a.active{ 
    border-width: var(--border-width);
    border-color: transparent;
    background:orange; 
  }
  

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