Question

Take a look a this. I’m accessing the button’s height and width using jquery’s methods, and via accessing .css("height"), and I get two wrong answers.

I’m at 100% browser zoom. What’s going on here?

Inner Height: 46, Inner Width: 196
Height: 46, Width: 196
CSS Height:44px, CSS Width: 184px
(The actual button dimensions are 200 X 50)

Answer 1

You are overlooking the fact the by default, the boxing policy for CSS rendering excludes the border from the width-height. You have border-top = 1, border-bottom = 3, and border-right = border-left – 7, which accounts for the missing dimension.

To get the computed amounts for the width/height of an element, including it’s border+padding you can use outerWidth()/outerHeight()

Also, in my case, I get all the values properly:

Inner Height: 46, Inner Width: 186

Height: 46, Width: 186

CSS Height:46px, CSS Width: 186px

(The actual button dimensions are 200 X 50)