Bootstrap4中padding、margin均为0时盒子尺寸与行高不符的原因是什么

• 自定义样式未完全覆盖Bootstrap默认规则
  Bootstrap4内置的.nav-link类默认带有padding: 0.5rem 1rem的样式，若你自定义的.menu-ppal-text a选择器优先级低于Bootstrap的默认规则，a标签的padding不会实际生效为0。同时你自定义的.menu-ppal li规则明确设置了padding: 0 10px 0 0，li元素的右内边距会被计算到盒子总宽度中。
• inline元素的尺寸计算特性
  你给a标签设置了display: inline，inline元素的宽高无法通过CSS手动指定，完全由内容的实际渲染尺寸决定，不受width、height属性约束。
• 字体、行高与盒模型设置的叠加影响
  font-size:16px指的是字体的em-square标准高度，实际渲染时字体的上升部、下降部总和本身就会超过16px。如果行高规则被Bootstrap默认的line-height:1.5覆盖（你给nav设置的line-height优先级不足时），最终元素高度会达到21px左右。同时你设置了box-sizing: content-box，内边距会额外加到内容尺寸上，不会包含在设定的宽高中，进一步放大了盒子尺寸和font-size的差值。
• 文本转换带来的宽度变化
  你给a标签设置了text-transform: uppercase，原文本"Actus"被转为全大写的"ACTUS"，大写字母的字符宽度更大，加上Oxygen字体本身的字符宽度、字间距设置，最终内容宽度就是你观测到的50.4333px。

内容的提问来源于stack exchange，提问作者D.Picard