Chrome DevTools中mat-icon-button显示尺寸与计算样式不符的原因

这种视觉尺寸和计算样式的差异，是Angular Material遵循Material Design交互规范导致的：

• mat-icon-button对应的<button>元素本身的计算样式为40x40px，这是按钮包含图标及基础内边距后的实际尺寸。
• 悬停时看到的48x48px是状态交互层（比如悬停背景、波纹效果）的尺寸。Material Design要求触摸交互的目标区域至少为48x48px，以此保证移动端操作的易用性。Angular Material通过内置样式，给按钮附加了一个超出按钮本体尺寸的状态交互层，这个层在鼠标悬停时会被触发显示，所以视觉上呈现48x48px的大小，但按钮元素自身的计算尺寸仍然是40x40px。

简单总结：按钮本体是40x40px，但为了满足触摸交互规范，额外设置了48x48px的交互触发层，悬停时该层显现，就造成了视觉与计算样式的尺寸差异。

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