javascript - $(li).width() returning value which includes padding? -

http://jsfiddle.net/meomix/8zg2v/83/

i've got following jsfiddle. idea when context menu item long displayed, renders ellipsis, on mouseover pans through text.

the code in question:

//provides helper methods non-specific functionality. define('helpers', [], function () {     'use strict';      return {         scrollelementinsideparent: function(element, parent) {             //  scroll element if long read.             $(element).mouseover(function () {                  var distancetomove = $(this).width() - $(parent).width();                  console.log("my width , parent width:", $(this).width(), $(parent).width());                  $(this).animate({                     marginleft: "-" + distancetomove + "px"                 }, {                     //  feel value; scales text gets longer                     duration: 15 * distancetomove,                     easing: 'linear'                 });              }).mouseout(function () {                 $(this).stop(true).animate({ marginleft: 0 });             });         }     }; 

here log element being scrolled upon's width parents width. console outputs:

my width , parent width: 360 230

but seems incorrect when looking @ metrics:

why this?

in code, parent parameter refers <ul>. use $(this).parent() <li>

demo: http://jsfiddle.net/esl2x/