为何button与div用px设置尺寸相等，用em设置时button更小？

这个问题其实是浏览器默认样式和em单位的特性共同导致的，我来给你拆解清楚：

1. px单位的一致性原因 #

px是绝对单位，它直接对应屏幕上的固定像素数量，和元素的其他样式（比如字体大小）完全无关。所以你给<div>和<button>都设置width:102px; height:102px时，它们的宽高会严格按照指定的像素值渲染，自然尺寸完全相等。

2. em单位的差异根源 #

em是相对单位，它的计算基准是当前元素的font-size：

• 如果元素自身没有显式设置font-size，就会继承父元素的字体大小，最终追溯到浏览器的默认根字体大小（通常是16px）。
• 但浏览器对不同元素的默认样式是有区别的：大多数浏览器中，<div>的默认font-size就是根字体大小16px，而<button>元素的默认font-size普遍更小（比如14px，不同浏览器可能略有差异）。

举个实际计算的例子：

• .div2的10em = 10 × 16px = 160px
• .button2的10em = 10 × 14px = 140px
  这就导致用em设置时，button的尺寸明显比div小。

3. 如何让em单位下两者尺寸一致？ #

只需要给两个元素显式设置相同的font-size即可，比如：

.div2 { 
  width: 10em; 
  height: 10em; 
  border: 1px solid blue; 
  font-size: 16px; /* 统一字体大小基准 */
}
.button2{ 
  width: 10em; 
  height: 10em; 
  border: 1px solid red; 
  font-size: 16px; /* 统一字体大小基准 */
}

这样两者的em计算基准一致，尺寸就会完全相同了。

另外，如果你想避免这种元素默认样式带来的不确定性，也可以使用rem单位——它是相对于根元素（<html>）的font-size计算的，只要根字体大小不变，所有元素的rem计算结果都会统一。

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