Why does width and height CSS not affect this button element?

Question

If I have

<button></button>

with

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

It renders like this in Firefox (47.0)

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

 <button></button> 

Why isn't it square?

Answer 1

Firefox applies a default padding to the element as shown in the screenshot below ( 6px on the left and on the right)

Also if you need to get a perfect squared button you need to set (or remove) its border, eg

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

(then you should probably adjust the width and height, because the button size decreases a lot)

---

Computed box model on Firefox:

Answer 2

What version of Firefox are you using? I can't replicate your problem, which makes me think it's either your browser or something else in your CSS. This snippet

 body { background: #000 } button { width: 1ex; height: 1ex; } 

 <button></button> 

looks like this for me in Chrome …… and like this for me in Firefox (I promise these are two different screenshots in the two different browsers!). And, for me, changing the width and height to 10ex does make the button a larger square, in both browsers.