The browser automatically calculates CSS height and width.
You can see them, for example, in tab "Computed styles" in Chrome Developers Tools(F12)
And docs:
jQuery.width()
Get the current computed width for the first element in the set of
matched elements or set the width of every matched element.
The difference between .css(width) and .width() is that the latter
returns a unit-less pixel value (for example, 400) while the former
returns a value with units intact (for example, 400px)
But if you want to get correct CSS value, i can advise don't use jQuery
if we have HTML:
<div id="elem" style="height: auto"></div>
we can write JS:
$('#elem').get(0).style.height // "auto"
if we have HTML:
<div id="elem"></div>
JS:
$('#elem').get(0).style.height // ""
universal function:
var height = function(elem){
return $(elem).get(0).style.height === "" ? $(elem).height() : $(elem).get(0).style.height;
}