html - 为什么 width 和 height CSS 不影响这个按钮元素？

Question

如果我有

<button></button>

与

button {width: 1ex; height: 1ex;}

它在 Firefox (47.0) 中呈现如下

button {
  width: 1ex;
  height: 1ex;
}

<button></button>

为什么不是正方形？

Answer 1

Firefox 将默认填充应用于元素，如下面的屏幕截图所示(6px 在左侧和右侧)

另外，如果你需要一个完美的方形按钮，你需要设置(或移除)它的边框，例如

button { 
  width: 1ex;
  height: 1ex;
  padding: 0; 
  border: 1px solid currentColor;
}

(那么你可能应该调整宽度和高度，因为按钮尺寸减小了很多)

---

Firefox 上的计算框模型: