设置height为48px的HTML按钮为何实际测量高度为70px？

核心原因排查 #

出现CSS设置高度与实际测量值不符，主要是这几个常见问题：

• Chrome页面缩放未设为100%：如果浏览器开启了缩放（比如145%），CSS定义的48px会被放大，物理像素就会接近70px。按下Ctrl+0可快速重置为100%缩放。
• Windows系统显示缩放影响：Windows 11的显示缩放（比如145%）会让CSS像素和物理像素产生差异，Powertoys尺子测量的是物理像素，而DevTools显示的是CSS像素。设计师的Figma通常是按1x（100%缩放）设计的，你需要把系统缩放调回100%，或者在Chrome DevTools的设备工具栏中设置对应像素比来匹配设计稿。
• 浏览器默认样式干扰：button元素自带默认的padding、border和line-height，虽然DevTools计算总高度为48px，但如果存在margin，视觉上的整体高度会包含margin，导致测量值偏大。另外，未设置box-sizing: border-box时，height仅代表内容高度，padding和border会额外增加总高度——不过你DevTools里计算是48，说明这个可能不是主因，但重置样式能避免后续问题。

实操解决步骤 #

1. 重置Chrome缩放：按下Ctrl+0，确保页面缩放为100%，再用Powertoys测量。
2. 调整Windows显示缩放：打开「设置→系统→显示」，将缩放比例设为100%（若设计师是按此比例设计）。如果不能改系统缩放，在Chrome DevTools中打开设备工具栏（快捷键Ctrl+Shift+M），设置对应的设备像素比，让DevTools的预览匹配物理屏幕。
3. 重置按钮默认样式：给button添加以下CSS，消除浏览器默认样式的干扰，确保高度精确可控：

   button {
     margin: 0;
     padding: 0;
     border: none;
     line-height: 1;
     box-sizing: border-box;
   }
   

   box-sizing: border-box会让你设置的height直接包含padding和border，避免额外计算。

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